javascript - 为什么这个 knockout 代码没有获取绑定(bind)到 ObservableArray 的更改？

Question

我在(应该是)一些相对直接的代码中有一些奇怪的行为。我正在尝试添加 <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>

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

我在这里很困惑。为什么 Knockout 不接受最近前置项的更改？

Answer 1

因此，直接绑定(bind)到字符串并不能提供您期望的两种绑定(bind)方式，无论您是否在 observableArray 中有值。 observableArrays 仅跟踪对集合的更改(添加/删除的项目)，但不跟踪对数组中单个项目的更改。

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

js

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

html

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

fiddle : http://jsfiddle.net/e2b0089j/