Как добавить к наблюдаемому массиву с использованием сопоставления с нокаутом

Question

Я пытаюсь добавить элемент json в наблюдаемый массив, а в рендеринге появляется. Но когда я пытаюсь получить доступ к элементу с использованием синтаксиса item.property(), он выходит из строя, но только для элемента post-initial-binding. Лучше объяснено с кодом ...

Js:

var data = { colors: []}; 
data.colors.push({title: 'blue' }); 
var vm = ko.mapping.fromJS(data); 
ko.applyBindings(vm); 

vm.colors.push({ title: 'red' }); 

$("#out").html("<br/>colors are ...<br/>"); 
$.each(vm.colors(), function(i, clr) { 
$("#out").append(clr.title() + "<br/>"); 
}); 

Выход: (примечание, "красный" не выплюнуть: /)

blue 
red 

colors are ... 
blue 

Демо: http://jsbin.com/ivacuw/7/edit

Я также пробовал делать vm.colors([ { title: 'red' }]) вместо vm.colors.push(...), но та же проблема. Ошибка Uncaught TypeError: Property 'title' of object #<Object> is not a function

Answer 1

При добавлении красного цвета. Заголовок - это строка, поэтому не ko.observable. Вот почему вы не можете назвать это.

Проблема не возникает в синем заголовке, потому что вы вызываете функцию fromJS, которая преобразует синюю строку в ko.observable (string).

var data = { colors: []}; 
data.colors.push({title: 'blue'}); 
var vm = ko.mapping.fromJS(data); 
ko.applyBindings(vm); 

//fix 
vm.colors.push({ title: ko.observable('red') }); 
$("#out").html("<br/>colors are ...<br/>"); 
$.each(vm.colors(), function(i, clr) { 
    $("#out").append(clr.title() + "<br/>"); 
}); 

@Ian Davis

Если я вас понял правильно. Вы можете это сделать:

[...] 
//vm.colors.push({ title: 'red' }); 
var arr = [{title:'green'},{title:'yellow'}]; 
ko.utils.arrayForEach(arr, function(item) {vm.colors.push(ko.mapping.fromJS(item)); }); 

Надеюсь, это поможет.