如何使用knockout映射添加到可观察数组

Question

我正在尝试将一个json项添加到一个可观察的数组中，并在foreach渲染中显示它。 但是当我尝试使用item.property()语法访问该项时，它会失败但仅适用于初始绑定后项。 用代码更好地解释......

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错误Uncaught TypeError: Property 'title' of object #<Object> is not a function

Answer 1

添加红色时。 标题是一个字符串，所以不是ko.observable。 这就是你不能称之为的原因。

蓝色标题上不会出现此问题，因为您调用fromJS函数将蓝色字符串转换为ko.observable（字符串）。

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)); });

我希望它有所帮助。