更新observableArray不会更新UI

时间:2012-01-14 08:41:06

标签: javascript knockout.js

我在ko 2.0中使用无容器流量控制。当我更新observableArray中的项目时,它不会更新UI。我正在更新这个数组:

this.editFormHost = function (formHost) {
    ...
    formHost.HostName = newHostName;
    this.formHosts[index] = formHost;
}

我认为它不会更新,因为按索引更新数组不会调用ko中的任何内容。通过查看the documentation,看起来没有方法可以更新对象,而对象又会更新UI。或者有吗?

1 个答案:

答案 0 :(得分:15)

这是一个小提琴,演示如何替换observableArray中的项目并让其更改通知UI。

http://jsfiddle.net/johnpapa/ckMJE/

这里的关键是observableArray上的替换函数。你也可以使用拼接。

...注意下面使用“替换”......

var ViewModel = function() {
    this.self = this;
    self.index = ko.observable(0); // default
    self.newColor = ko.observable("purple"); // default
    self.colors = ko.observableArray([{
        color: 'red'},
    {
        color: 'blue'},
    {
        color: 'yellow'}]);
    self.replaceIt = function() {
        self.colors.replace(self.colors()[self.index()], {
            color: self.newColor()
        });
    };
};
ko.applyBindings(new ViewModel());