复选框不更新值敲除 js

Question

我是 knockout js 的新手，感觉我可能没有理解这里的某些内容。我基本上有一个 MVC 复选框，选中时将更新另一个依赖于其他字段计算的字段。我可以让总金额字段相对于除复选框之外的所有其他字段进行更新，而且我不确定我做错了什么。我怀疑这是因为我没有传入 self，但我不确定如何将其与最终等式中的条件值一起传递，但我不确定为什么会这样完全没有情况。也许有人可以阐明这一点。

我还注意到，如果我对变量进行计算并返回最终变量，初始值会正确显示，但最终字段不会更新。出现这种情况是有原因的还是我做错了什么？

这是我正在使用的复选框标记

<div class="form-group-sm">
    <label for="bookingType">International Property</label>
    <div class="checkbox">
        @Html.EditorFor(model => model.IsInternationalProperty, new { @id = "internationalProperty", @value = true, @data_bind = "checked: internationalProperty" })
        <label style="width: 200px; text-align: left">Select if it is outside the US</label>
    </div>
</div>

这是我的 knockoutjs 视图模型

var viewModel = function (data) {
    var self = this;
    self.internationalProperty = ko.observable();
    self.vendorBookingAmount = ko.observable(2.00);
    self.transactionFeesDue = ko.observable(0.00);
    self.transactionFeesWaived = ko.observable(0.00);
    self.iceBookingFees = ko.observable(0.00);
    self.vacationCashRedeemed = ko.observable(0.00);
    self.pointsDiscount = ko.observable(0.00);
    debugger;
    var international = (self.internationalProperty() == true) ? 0.05 : 0;

    self.memberBalance = ko.computed(function () {
        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;
    }, self);
};

ko.applyBindings(new viewModel());

Answer 1

您需要将 international 变量的计算放在 memberBalance 中。现在你只计算一次，然后 memberBalance 使用相同的 international 值

    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;
    }, self);

编辑：如果您查看源代码并查看生成的 HTML，您会发现 data-bind 语句不存在于复选框中。问题是 @Html.EditorFor 具有与 @Html.CheckBoxFor、@Html.TextBoxFor 等不同的参数

参见post：http://cpratt.co/html-editorfor-and-htmlattributes/

您需要使用的语法是：

@Html.EditorFor(model => model.IsInternationalProperty, new { htmlAttributes = new { @id = "internationalProperty", @value = true, @data_bind = "checked: internationalProperty" } })

注意带有 htmlAttributes 属性的包装器对象。

复选框不更新值敲除 js

Checkbox not updating value knockout js

asp.net-mvc

checkbox

knockout.js

observable

computed-observable