跟踪更改 - observableArray中的可观察元素

Question

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

这是我的第一次尝试:http://jsfiddle.net/ZLs2A/0/.它不起作用(在为任何元素键入新值时,sum值不会更新).那时我意识到observableArray只会在插入或删除项目后触发sum函数.

<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());

我的下一个尝试是使数字数组中的每个元素都是可观察的(http://jsfiddle.net/ZLs2A/1/).它没有再起作用.

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

我的最后一次尝试是创建一个新类(ArrayItem)来保存元素在可观察属性中的值.这次它奏效了!(http://jsfiddle.net/ZLs2A/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());

但是,我不想创建这个新类ArrayItem.有没有办法摆脱它,使示例工作只是有一个observableArray的可观察元素(像我的第二次尝试)？

Answer 1

Knockout 不会跟踪该值，但作为解决方法，您可以使用事件按键或自行更改和更新值。请参阅小提琴：http://jsfiddle.net/tkirda/ZLs2A/4/

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());