javascript - 计算嵌套在数组中的可观察数组的总和

Question

我已经用 fiddle 证明了我的问题:http://jsfiddle.net/sljux/zVg7R/3/

我有一个对象数组。为简单起见，假设每个对象都有一个名称和一个值数组，所有这些都是可观察的:

self.array = [
    {
        name: ko.observable("first"),
        values: ko.observableArray([1, 2, 3])
    },
    {
        name: ko.observable("second"),
        values: ko.observableArray([2, 3, 4])
    },
    {
        name: ko.observable("third"),
        values: ko.observableArray([3, 4, 5])
    }
];

我需要从那个数组中过滤掉某些对象，并为每个对象添加一个额外的计算，计算所有值的总和。过滤部分对问题来说并不重要，所以不会做。问题是可观察对象需要是每个对象的属性，并且需要引用该对象的 values 数组。

我最好的尝试是:

self.newArray = ko.observableArray([]);

for(var i = 0; i < self.array.length; i++) {
    var obj = {
        name: ko.observable("new " + self.array[i].name()),
        values: ko.observableArray(self.array[i].values())
    };

    obj.sum = ko.computed({
        read: function() {
            var res = 0;

            for (var j = 0; j < obj.values().length; j++)
                res += obj.values()[j];

            return res;
        },
        owner: obj
    });

    self.newArray.push(obj);
}

问题是对 values 可观察数组的引用不知何故丢失了。也就是说，在第一次计算时，每个对象得到他的值的总和，但最后，每个计算计算数组中最后一个对象的总和。

我试过，并且没有计算的 owner 部分，引用仍然被转移。该错误在 fiddle 中明显可见，我在其中设置了三个按钮来更改每个值数组。

我也试过将它设置为一个类:

function Obj(name, values) {
    ...
}

self.newArray.push(new Obj("first", [1, 2, 3]);

但同样的事情发生了。

Answer 1

排序答案:使用 ko.utils.arrayForEach 而不是手动 for 循环:

ko.utils.arrayForEach(self.array, function(item) {
    var obj = {
        name: ko.observable("new " + item.name()),
        values: ko.observableArray(item.values())
    };

    obj.sum = ko.computed({
        read: function() {
            var res = 0;

            for (var j = 0; j < obj.values().length; j++)
                res += obj.values()[j];

            return res;
        },
        owner: obj
    });

    self.newArray.push(obj);
});

演示 JSFiddle .

长答案:您已经被这样一个事实所困扰，即在 JavaScript 中变量是函数范围的，因此您的 for 循环它不会创建三个本地 obj 变量，但重复使用相同的 one 变量，这与闭包的工作方式相结合，您将最终得到所有计算引用的最后一个值:

您可以通过将 for 主体包装在立即执行的函数中来解决此问题:

for(var i = 0; i < self.array.length; i++) {
    (function(){
    var obj = {
        name: ko.observable("new " + self.array[i].name()),
        values: ko.observableArray(self.array[i].values())
    };

    obj.sum = ko.computed({
        read: function() {
            var res = 0;

            for (var j = 0; j < obj.values().length; j++)
                res += obj.values()[j];

            return res;
        },
        owner: obj
    });

    self.newArray.push(obj);
    })();
}

演示 JSFiddle .