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。 有没有办法摆脱它，让这个例子只有一个可观察的可观察元素（如我的第二次尝试）？

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

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

1 个答案: