Question

请看看我的文字。我尝试使用oboutableArray of knockoutjs和foreach来计算数组的数据。示例1工作正常：如果更改字段中的数据，则计算总和。但是示例2不起作用。

<html>
<head>                                                                         
    <title></title>                                                            
    <script type='text/javascript' src='/js/jquery-1.8.2.min.js'></script>     
    <script type='text/javascript' src='/js/knockout-2.1.0.debug.js'></script> 
</head>                                                                        
<body>
<p>Example 1</p>
<div>
    <p>
    <input data-bind="value: fnum1" />
    <input data-bind="value: fnum2" />
    <span data-bind="text: ftotsum"></span>
    </p>
</div>    
<p>Example 2</p>
<div>
    <p>
    <!-- ko foreach: fields -->
    <input data-bind="value: $data" />
    <!-- /ko -->
    <span data-bind="text: ltotsum"></span>
    </p>
</div>
</body>
<script>
    function vm(){
        //Calc Example 1
        var self = this;
        self.fnum1 = ko.observable(1);
        self.fnum2 = ko.observable(2);
        self.ftotsum = ko.computed(function(){
            return parseFloat(self.fnum1()) + parseFloat(self.fnum2());
        });
        //Calc Example 2
        self.fields = ko.observableArray([1, 2]);
        self.ltotsum = ko.computed(function(){
            var total = 0;
            ko.utils.arrayForEach(self.fields(), function(item) {
                total += parseFloat(item);
            })
            return total;
        }); 
    };

    ko.applyBindings(new vm());
</script>
</html>

Answer 1

编辑：有小提琴工作，Raffaele说你需要将observable包装在一个对象中是正确的，但你可以在数组创建中自己做，我喜欢使用ko.utils要解开我的observable，它对于observables做同样的事情，但是如果有一个非observable传递给它，它不会崩溃。有关完整示例，请参阅fiddle。

observableArray不会使值传递为可观察的，这是一个常见的错误。 observableArray只观察对数组的修改而不是值。如果你想让你的数组中的值可观察，你必须这样做。

function vm(){
    //Calc Example 1
    var self = this;
    self.fnum1 = ko.observable(1);
    self.fnum2 = ko.observable(2);
    self.ftotsum = ko.computed(function(){
        return parseFloat(self.fnum1()) + parseFloat(self.fnum2());
    });
    //Calc Example 2
    self.fields = ko.observableArray([{"num":ko.observable(1)},{"num":ko.observable(2)}]);
    self.ltotsum = ko.computed(function(){
        var total = 0;
        ko.utils.arrayForEach(self.fields(), function(item) {
            total += parseFloat(ko.utils.unwrapObservable(item.num));
        });
        return total;
    }); 
};
ko.applyBindings(new vm());

现在应该使用上面的例子。

Answer 2

documentation说：

关键点：observableArray跟踪数组中的对象，而不是这些对象的状态

简单地将一个对象放入一个observableArray并不能完全实现   该对象的属性本身是可观察的。当然可以   如果你愿意，可以观察这些属性，但那是一个   独立选择。 observableArray只跟踪它的对象   保持，并在添加或对象时通知侦听器   的移除

您的第二个示例不起作用，因为输入字段的值未绑定到数组中的值。数组中的值仅在foreach绑定中使用一次，但是当您在输入框中键入时，没有任何内容触发KO。

以下a working fiddle已实施解决方案。我使用了助手ObsNumber

function vm(){ var self = this; var ObsNumber = function(i) { this.value = ko.observable(i); } self.fields = ko.observableArray([new ObsNumber(1) , new ObsNumber(2)]); self.sum = ko.computed(function(){ var total = 0; ko.utils.arrayForEach(self.fields(), function(item) { total += parseFloat(item.value()); }); return total; }); }; ko.applyBindings(new vm());

以及以下标记

<div> <p>  <input data-bind="value: $data.value" />  <span data-bind="text: sum"></span> </p> </div>

Knockoutjs。如何计算可观察数组内的数据变化

2 个答案: