Почему этот код нокаута не набирает изменения, связанные с 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, нокаут, похоже, «перепланируется», а исходное поле подбирает изменения в текстовом поле и может быть удалено без проблем.

Я здесь довольно озадачен. Почему нокаут не вносит изменения в недавно добавленные элементы?

Answer 1

Так что привязка непосредственно к строке не обеспечивает двухстороннюю привязку, которую вы ожидаете, независимо от того, было ли у вас значение в наблюдаемом массиве. observableArrays просто отслеживают изменения в коллекции (элементы добавляются/удаляются), но не изменяются для отдельных элементов массива.

Чтобы устранить эту проблему, вам нужно будет обновить модель данных немного:

JS

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

HTML

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

Fiddle: http://jsfiddle.net/e2b0089j/