Knockout.js 跟踪变化-observableArray中的可观察元素

我需要使用Javascript和Knockout.js在web应用程序中编辑整数数组。此数组将绑定到文本框，并且每当更改任何文本框的值时，都会更新该数组。当它被更新时，计算元素的总和

这是我第一次尝试：。它不起作用（当为任何元素键入新值时，总和值不会更新）。这时我意识到ObserverArray只会在插入或删除项后触发求和函数

<h4>Numbers</h4>
<button data-bind="click: add">Add</button>
<ul data-bind="foreach: numbers">
    <li>
        <input data-bind="value: $data"></input>
    </li>
</ul>
<span data-bind="text: sum"></span>

function MyViewModel() {
    var self = this;

    self.numbers = ko.observableArray([
        1,
        2,
        3
    ]);

    self.sum = ko.computed(function() {
        var items = self.numbers();
        var total = 0;
        for (var i = 0; i < items.length; i++) {
            total += parseInt(items[i]);
        }
        return total;
    });

    self.add = function() {
        var lastIndex = self.numbers().length - 1;
        var lastValue = self.numbers()[lastIndex];
        self.numbers.push(lastValue + 1);
    }
}

ko.applyBindings(new MyViewModel());

我的最后一次尝试是创建一个新类（ArrayItem），将元素的值保存在可观察属性中。这次成功了！（）

数字
添加




函数MyViewModel（）{
var self=这个；
self.number=ko.array([
新阵列项目（1），
新阵列项目（2），
新阵列项目（3）
]);
self.sum=ko.computed（函数（）{
var items=self.numbers（）；
var合计=0；
对于（变量i=0；i

---

但是，我不想创建这个新的类ArrayItem有没有办法摆脱它，让示例只使用可观察元素的可观察数组（如我的第二次尝试）？

敲除不会跟踪值，但作为一种解决方法，您可以使用事件按键或自己更改和更新值。参见小提琴：

函数MyViewModel（）{
var self=这个；
self.number=ko.array([
1.
2.
3.
]);
self.onChange=函数（val，e）{
var el=e.src元素；
var newVal=parseInt（el.value）；
var index=parseInt（el.getAttribute（'data-index'））；
self.numbers（）[index]=newVal；
self.updateSum（）；
}
self.sum=ko.可观察（0）；
self.updateSum=函数（）{
var items=self.numbers（）；
var合计=0；
对于（变量i=0；i

KO的作者回答说，基本上与您的最终版本类似，使用了

ArrayItem

构造函数（他只是内联了该函数）。答案是一年前，所以在此期间可能发生了一些变化。。。如果没有，那么你似乎已经回答了自己的问题。可能值得一提的是Breeze.js与Knockout.js的集成，它在其他方面添加了更改跟踪。虽然这似乎适用于IE11，但JSFIDLE示例中的sum不会随着Firefox45.0.1中文本字段值的更改而更新

self.numbers = ko.observableArray([
    ko.observable(1),
    ko.observable(2),
    ko.observable(3)
]);

<h4>Numbers</h4>
<button data-bind="click: add">Add</button>
<ul data-bind="foreach: numbers">
    <li>
        <input data-bind="value: value"></input>
    </li>
</ul>
<span data-bind="text: sum"></span>

function MyViewModel() {
    var self = this;

    self.numbers = ko.observableArray([
        new ArrayItem(1),
        new ArrayItem(2),
        new ArrayItem(3)
    ]);

    self.sum = ko.computed(function() {
        var items = self.numbers();
        var total = 0;
        for (var i = 0; i < items.length; i++) {
            total += parseInt(items[i].value());
        }
        return total;
    });

    self.add = function() {
        var lastIndex = self.numbers().length - 1;
        var lastItem = self.numbers()[lastIndex];
        var newValue = parseInt(lastItem.value()) + 1;
        self.numbers.push(new ArrayItem(newValue));
    }
}

function ArrayItem(value){
    var self = this;
    self.value = ko.observable(value);
}

ko.applyBindings(new MyViewModel());

function MyViewModel() {
    var self = this;

    self.numbers = ko.observableArray([
        1,
        2,
        3
    ]);

    self.onChange = function(val, e){
        var el = e.srcElement;
        var newVal = parseInt(el.value);
        var index = parseInt(el.getAttribute('data-index'));
        self.numbers()[index] = newVal;
        self.updateSum();
    }

    self.sum = ko.observable(0);

    self.updateSum = function() {
        var items = self.numbers();
        var total = 0;
        for (var i = 0; i < items.length; i++) {
            total += parseInt(items[i]);
        }
        self.sum(total);
    };

    self.updateSum();

    self.add = function() {
        var lastIndex = self.numbers().length - 1;
        var lastValue = self.numbers()[lastIndex];
        self.numbers.push(lastValue + 1);
    }
}

ko.applyBindings(new MyViewModel());