jquery - Knockoutjs 计算更新后不会重新计算

Question

我正在使用一个可观察的“Parts”数组，其中包含一个可观察的“Vol”。我目前有每个部分的体积以及显示的总量。当应用程序启动时，总​​金额会正确添加。但是，当我更改零件的体积时，不会重新计算总量。

HTML:

<ul>
    <li data-bind="foreach:  Parts">
        <input data-bind="value: Vol" />
<br/>
    </li>
</ul>

<br/>
<br/>
<span data-bind="text: fullVol "></span>

Javascript:

    function Part (data) {

       var self = this;
        self.Vol= ko.observable(data.Vol);

    }


    function AppViewModel() {
       var self = this;


        self.Parts = ko.observableArray([new Part({"Vol": 1}), new Part({"Vol":2}), new Part({"Vol":3})]);
        self.fullVol = ko.computed(function() {
            var total = 0;
           $.each(self.Parts(), function() { total += (this.Vol() ) })
            return total;
        });
    }


ko.applyBindings(new AppViewModel());

这是我的 JsFiddle:http://jsfiddle.net/jwinstonaspen/Zmkew/6/

Answer 1

当您使用value: Vol绑定(bind)knockout时，不会将您的输入转换为整数，只会将用户输入的数据存储为字符串。

所以在计算总数之前需要将其解析为整数:

$.each(self.Parts(), function() { total += (parseInt(this.Vol()) ) })

固定fiddle .

现在，因为您正在进行解析，所以您不应该忘记处理用户输入非数字输入的情况。

但是您可以轻松地编写 custom binding handler它抽象了解析。

或者您可以使用ko.extenders。该文档还有一个示例 here .