javascript - knockout foreach 绑定(bind)，更新值

Question

我得到了 ko 模型:

var Model = function(notes) {
    this.note = ko.observableArray(notes);
}; 

var model = new Model([{"post":"a"},{"post":"b"}]);
ko.applyBindings(model);

和 html div:

<div data-bind='foreach: note'>
    <p><span data-bind='text: post'>
    <p><input data-bind='value: post'>
</div>

这是 fiddle :http://jsfiddle.net/DE9bE/

我想在 input 中输入新文本时更改我的 span 值，就像在那个 fiddle 中一样:http://jsfiddle.net/paulprogrammer/vwhqU/2/ 但它没有更新。我如何在 foreach 绑定(bind)中做到这一点？

Answer 1

对象的属性需要做成observables .

你可以自己手动完成这个(我在这里使用了普通的 js 数组 map 方法，如果你需要 IE8 支持，你可以使用 ko.utils.arrayMap 来达到同样的目的):

var Model = function(notes) {
    this.note = ko.observableArray(notes.map(function(note){
        note.post = ko.observable(note.post);
        return note;
    }));
}; 
var model = new Model([{"post":"a"},{"post":"b"}]);
ko.applyBindings(model);

Demo

---

或者您可以使用 mapping plugin (您需要包含的单独 js 文件)它会(递归地)为您执行此操作。

var Model = function(notes) {
    this.note = ko.mapping.fromJS(notes);
}; 
var model = new Model([{"post":"a"},{"post":"b"}]);
ko.applyBindings(model);

Demo

---

如果您从服务器获取整个数据对象，您也可以直接提供它:

var model = ko.mapping.fromJS({
    note: [{"post":"a"},{"post":"b"}]
});
ko.applyBindings(model);

Demo