Не удается правильно привязать наблюдаемый массив наблюдаемых

#javascript #knockout.js #ko.observablearray

#javascript #knockout.js #ko.observablearray

Вопрос:

У меня есть следующий код, который должен связать наблюдаемый массив наблюдаемых.

 <button data-bind="click: loadTag">Upload</button>
<span data-bind="foreach: langs">
    <input data-bind="value: $data, valueUpdate: 'afterkeydown'"/>
</span>

<div data-bind = "text: ko.toJS(langs)">

function vm() {
    var self = this;
    this.langs      = ko.observableArray([]);

    this.initiate = function(){
        self.langs = ko.observableArray([]);
        for (var i = 0; i < 4; i  ){
            self.langs.push(ko.observable('start'));
        }
    }
    this.initiate();

    this.loadTag = function(){
        for (var i = 0; i < 4; i  ){
            self.langs()[i](i);
        }
    }
}

ko.applyBindings(new vm());
  

Доступна скрипка JS.

Как вы видите в начале, он правильно привязывается, а также привязка работает при загрузке тега. Но проблема в том, что когда я изменяю элементы во входных данных, привязка не распространяется. Я думаю, что я пропустил что-то действительно простое, но не могу найти, что.

Ответ №1:

Если у вас непосредственно есть ko.observable объекты в вашем массиве, вам нужно использовать $rawData вместо $data привязки непосредственно к самим наблюдаемым объектам, а не к их значениям:

 <span data-bind="foreach: langs">
    <input data-bind="value: $rawData, valueUpdate: 'afterkeydown'"/>
</span>
  

Демонстрационный JSFiddle.

Из документации:

$rawData

Это значение модели необработанного представления в текущем контексте. Обычно это будет то же $data самое, что и , но если модель представления, предоставленная Knockout, обернута в observable, $data будет развернутой моделью представления и $rawData будет самой observable .

Комментарии:

1. Вау, не знал этого. Даже не слышал об этом. Спасибо.

2. Это недавно добавленная функция в KO 3.0. До этого вам приходилось, что на самом деле не поддерживалось прямое наличие наблюдаемых внутри observablearray.