knockout.js - 如何使用敲除映射添加到可观察数组

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

Answer 1

当您添加红色时。标题是一个字符串，所以不是 ko.observable。这就是为什么你不能调用它。

蓝色标题上没有出现该问题，因为您调用了将蓝色字符串转换为 ko.observable(string) 的 fromJS 函数。

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

@伊恩戴维斯

如果我理解你的话。你可以这样做：

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

我希望它有所帮助。