应该通过jQuery更改div的文本属性更新绑定的ko.observableArray

时间:2013-10-01 19:47:15

标签: knockout.js foreach ko.observablearray

我有一个使用knockout foreach binding绑定的容器div:

   <div id="foo" data-bind="foreach: { data: fooObservableArray, afterAdd: afterAdd}">
       <div data-bind="text: $data"></div>
   </div>

在ViewModel的afterAdd方法中:

     self.fooObservableArray = ko.observableArray([]);

     self.afterAdd = function(element){
           // make some changes to the DIV's text after it has been created
           <snip>
           $(element).text( someNewValue() );
     ; 

someNewCalculatedValue未显示在fooObservableArray中,但 显示在用户界面中。

是否淘汰没有观察div的text属性,因为它会观察到绑定输入的值?

将afterAdd修改应用于通过foreach绑定创建的新div元素的文本的正确方法是什么?

1 个答案:

答案 0 :(得分:1)

您无需使用jQuery来设置文本值。 Afteradd通常是做一些高级逻辑的函数,你不应该需要它。

首先更改您的HTML

<div id="foo" data-bind="foreach: fooObservableArray">
    <div data-bind="text: MyText"></div>
</div>

现在更新你的javascript

function MyModel()
{
this.MyText = ko.observable()
}

// Your knockout view model
function ViewModel()
{
 this.fooObservableArray = ko.observableArray();       
} 

var vm = new ViewModel();
ko.applyBindings(vm);

// Create 2 objects
var m1 = new MyModel();
m1.MyText("hello m1");
var m2 = new MyModel();
m2.MyText("hello m2");

// add them to array
vm.fooObservableArray.push(m1);
vm.fooObservableArray.push(m2);