javascript - 为什么此基因 knockout 代码不选择绑定(bind)到ObservableArray的更改？

我在（应该是）一些相对简单的代码中有一些奇怪的行为。我正在尝试将<input>标记添加到元素列表上。

的HTML

<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>

Java脚本

    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，则将空字符串发送到我的函数。但是，如果我通过input按钮添加另一个add元素，则敲除似乎会“重排”，并且原始字段会拾取文本字段中的更改，并且可以毫无问题地将其删除。

我在这里很困惑。为什么淘汰赛不接受最近放置的物品上的更改？

最佳答案

因此，直接绑定到字符串不会提供您期望的两种方式的绑定，无论您在observableArray中是否具有该值。 observableArrays只是跟踪对集合的更改（添加/删除的项），而不是对数组中单个项的更改。

要解决此问题，您将需要稍微更新数据模型：

js

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

html

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

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