淘汰foreach绑定，更新值

Posted 2023-03-27

【中文标题】淘汰foreach绑定，更新值

【英文标题】：Knockout foreach binding, update value

【发布时间】：2014-08-20 16:55:54

【问题描述】：

我得到了 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>

这是小提琴：http://jsfiddle.net/DE9bE/

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

【参考方案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

【讨论】：

非常感谢。现在我知道问题出在哪里了。

【参考方案2】：

你想要的是一个带有 observables 的 observable 数组，否则你的 span 将不会更新，因为你正在更改一个不可观察的变量，请参阅这篇文章。

KnockoutJS - Observable Array of Observable objects

【参考方案3】：

试试这个：

HTML

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

javascript

 var Model = function (notes) 
      this.note = ko.observableArray(notes);
 ;
 var Post = function (data) 
     this.post = ko.observable(data);
 ;

 var model = new Model([new Post("a"), new Post("a")]);
 ko.applyBindings(model);

Demo