为什么这段代码不能识别绑定到ObservableArray上的变化?

Why isn't this knockout code picking up changes bound to an ObservableArray?

本文关键字：ObservableArray 绑定 变化 识别 不能 段代码 代码 为什么      更新时间：2023-09-26

我在一些相对直接的代码中发现了一些奇怪的行为。我试图将<input>标记添加到元素列表上。

<button data-bind="click: addItem">Add</button>
<div data-bind="foreach: items">
    <input data-bind="value: $parent.items()[$index()]" />
    <button data-bind="click: $parent.removeItem">Remove</button>
    <br>
</div>
Javascript

    function ItemViewModel() {
        var self = this;
        self.items = ko.observableArray();
        self.addItem = function() {
            self.items.unshift('');
        }
        self.removeItem = function(name) {
            self.items.remove(name);
        }
    }
    ko.applyBindings(new ItemViewModel());

怎么了

RemoveItem向函数发送一个空字符串，而不是input元素的内容。然而，奇怪的是，这只适用于最近追加的项目，只有当没有其他项目被点击。例如，如果我在input上键入一些文本，并单击remove，将向我的函数发送一个空字符串。但是，如果我通过add按钮添加另一个input元素，Knockout似乎会"回流"，原始字段会拾取文本字段中的更改，并且可以毫无问题地删除。

我很困惑。为什么淘汰赛没有注意到最近预装物品的变化?

所以直接绑定到字符串并不能提供你所期望的两种绑定方式，无论你是否在observableArray中拥有该值。observableArrays只跟踪对集合的更改(添加/删除的项)，而不跟踪数组中单个项的更改。

要解决这个问题，您需要稍微更新一下数据模型:

js 

self.addItem = function() {
    self.items.unshift({name: ko.observable('')});
}
html

<input data-bind="value: name" />

小提琴:http://jsfiddle.net/e2b0089j/

相关文章：