从ajax更改视图模型时，计算出的剔除未更新

我对淘汰赛Js的了解是，无论如何，计算都将根据视图模型进行更新，但是在我看来，这是没有发生的。因此，基本上，我有一个单选按钮，该按钮可以打开和关闭并更改数据库中的日期，而ajax调用将返回并在视图模型中推送新日期，以便更改数据。

多数民众赞成在总结。但是我想要的是，在更新单选按钮时，我希望基于单选按钮将html的一部分更改为活动或禁用。

首先，这里是HTML代码。

<div class="col-sm-4">
  <p>
    <span data-bind="text : $data.basketStatusValue"></span>
  </p>
</div>
<div class="col-sm-4">
  <div class="on_off">
    <input type="checkbox"  data-bind="bootstrapSwitchOn: {
        tocall: $root.changeActiveBasketStatus
    }" />
  </div>
</div>

这是JS代码。

function MoneyInvestedViewModel(root /* root not needed */, money) {
    var self = this;
    self.ID = money.ID;
    self.ORIG_ID = money.ORIG_ID;
    self.Available = money.Available;
    self.basketStatusValue = ko.computed (function () {
        if (self.Available == '9999-12-01') {
            return "Active";
        } else {
            return "Disabled";
        }
    });
};

接下来是更新视图模型moneyInvested的代码。因此，该复选框可以显示为开或关。

self.changeActiveBasketStatus = function (bindingContext) {
    console.log(bindingContext);
    var Id = bindingContext.$data.ORIG_ID;
    var Available = bindingContext.$data.Available;
    if (Available == '9999-12-01') {
        $.ajax({
            type: 'POST',
            url: BASEURL + 'index.php/moneyexchange/changeBasketStatus/' + auth + "/" + Id + "/" + 1,
            contentType: 'application/json; charset=utf-8'
        })
        .done(function (newAvailableDate) {
            bindingContext.$data.Available = newAvailableDate;
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            self.errorMessage(errorThrown);
        })
        .always(function (data){  
        });
    } else {
        $.ajax({
            type: 'POST',
            url: BASEURL + 'index.php/moneyexchange/changeBasketStatus/' + auth + "/" + Id + "/" + 0,
            contentType: 'application/json; charset=utf-8'
        })
        .done(function (newAvailableDate) {
            bindingContext.$data.Available = newAvailableDate;
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            self.errorMessage(errorThrown);
        })
        .always(function (data) {
        });
    }
};

因此，基本上，问题在于，完成所有此更新后，所计算的self.basketStatusValue不会得到更新。因此，当我单击复选框时，它不显示“活动”，或单击“禁用”，则该复选框运行良好，只有html$data.basketStatusValue不能通过计算函数进行更新。

万一有必要，这里是复选框的代码。

(function ($) {
    ko.bindingHandlers.bootstrapSwitchOn = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var options = ko.utils.unwrapObservable(valueAccessor());
            var tocall = ko.utils.unwrapObservable(options.tocall);

            $elem = $(element);
            $(element).bootstrapSwitch();
            $(element).bootstrapSwitch('setState', bindingContext.$data.Available === '9999-12-01' ? true : false); // Set intial state
            $elem.on('switch-change', function (e, data) {
                tocall(bindingContext);
                // valueAccessor()(data.value);
            });
        },
        update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        }
    };
})(jQuery);

总而言之，$data.basketStatusValue当复选框处于打开或关闭状态时，我要做的就是将其“活动”或“禁用”。