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（字符串）的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/>");
});

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

我希望它有所帮助。

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

1 个答案: