Question

我目前正在尝试使用Knockout js运行一些计算。我的问题是最后的计算没有在UI中更新。基本上我有三个付款字段是根据总价计算的，因此用户可以以不同的金额进行付款。 Payment1等于memberBalance，但如果用户更改payment1，则payment2计算为memberBalance - payment1。与payment3类似，如果用户更新payment2，则payment3 = memberBalance - paymentAmount1 - paymentAmount2。这是我的代码来显示场景。我在UI中使用了mvc razor。

以下是我的razor / html

的摘录

@Html.EditorFor(model => model.MemberBalance,
new
{
   htmlAttributes = new
   {
       @class = "form-control",
       @id = "memberBalance",
       @name = "rg-from",
       data_bind = "value: memberBalance, valueUpdate: 'afterkeydown', enable: false"
   }
})

@Html.EditorFor(model => model.PaymentAmount_1,
new
{
    htmlAttributes = new
    {
        @class = "form-control",
        @id = "paymentAmount1",
        @name = "rg-from",
        @data_bind = "value: paymentAmount1, valueUpdate:'afterkeydown'"
    }
})

@Html.EditorFor(model => model.PaymentAmount_2,
new
{
    htmlAttributes =
    new
    {
        @class = "form-control",
        @id = "paymentAmount2",
        @name = "rg-from",
        @data_bind = "value: paymentAmount2, valueUpdate:'afterkeydown'"
    }
})

@Html.EditorFor(model => model.PaymentAmount_3,
new
{
    htmlAttributes =
    new
    {
        @class = "form-control",
        @id = "paymentAmount3",
        @name = "rg-from",
        @data_bind = "value: paymentAmount3, valueUpdate:'afterkeydown'"
    }
})

这是我的ko视图模型

var viewModel = function (data) {
        var self = this;
        self.pointsToBeRedeemed = ko.observable(startingValue);
        self.vendorBookingAmount = ko.observable(startingValue);
        self.transactionFeesDue = ko.observable(startingValue);
        self.transactionFeesWaived = ko.observable(startingValue);
        self.iceBookingFees = ko.observable(startingValue);
        self.vacationCashRedeemed = ko.observable(startingValue);
        self.pointsDiscount = ko.observable(startingValue);
        self.internationalProperty = ko.observable();
        self.paymentAmount1 = ko.observable(startingValue);
        self.paymentAmount2 = ko.observable(startingValue);
        self.paymentAmount3 = ko.observable(startingValue);
        self.memberBalance = ko.observable(startingValue);

        self.memberBalance = ko.computed(function () {
            var international = (self.internationalProperty() == true) ? 0.05 : 0;
            return ((Number(self.vendorBookingAmount()) + Number(self.transactionFeesDue()) -
                Number(self.transactionFeesWaived()) + Number(self.iceBookingFees()) -
                Number(self.vacationCashRedeemed()) - Number(self.pointsDiscount())) +

                (Number(self.vendorBookingAmount()) + Number(self.transactionFeesDue()) -
                Number(self.transactionFeesWaived()) + Number(self.iceBookingFees()) -
                Number(self.vacationCashRedeemed()) - Number(self.pointsDiscount())) * international).toFixed(decimalPlace);
        }, self);

        self.paymentAmount1 = ko.computed(function () {
            return Number(self.memberBalance()).toFixed(decimalPlace);
        }, self);

        self.paymentAmount2 = ko.computed(function () {
            return (Number(self.memberBalance()) - Number(self.paymentAmount1())).toFixed(decimalPlace);
        }, self);

        self.paymentAmount3 = ko.computed(function () {
            return (Number(self.memberBalance()) - Number(self.paymentAmount1()) - Number(self.paymentAmount2())).toFixed(decimalPlace);
        }, self);
    };

我的猜测是这是一个依赖问题。我读到，如果淘汰赛计算相同的东西，那么淘汰赛不会计算一件事情，我相信在这种情况下会发生这种情况。反正有没有规避那个？我已经查看了peek（）和订阅函数，但除非我以错误的方式使用它们，否则它们似乎不会更新我正在使用它们的字段。例如，如果我在payment1函数中使用peck on memberBalance方法，那么payment1函数不再更新，但另外两个函数如果我在pay1或payment2的任何方法中使用peek，我只是返回NaN。订阅也有一些奇怪的行为。也许我对ko的新手太多了，但似乎并没有很多关于此的好文档，但也许我在正确的轨道上？

如果重要的话，我还会使用maskMoney来掩盖这些字段，但是我没有对那些我没有对其他字段做过的事情做任何事情。提前谢谢！

Answer 1

似乎（对我而言）是一个与淘汰赛代码无关的问题，但是与逻辑和计算有关。

paymentAmount1与memberBalance
paymentAmount2因此总是0
使paymentAmount3也始终为0。

请记住，当一个observable保存一个原始值时，如果它被设置为相同的值，它将不会触发更新。

如果你希望你的observable是“可写的”，你必须指定反转逻辑的write方法。

另请注意，您已经定义了paymentAmount 1,2和3以及memberBalance两次：首先是可观察的，后来是计算的。

Knockout js依赖链结束不更新

1 个答案: