复选框不更新价值淘汰js

Question

我是淘汰赛 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 等不同。

见帖子：http://cpratt.co/html-editorfor-and-htmlattributes/

你需要使用的语法是：

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

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