Knockout嵌套observableArray没有绑定

时间:2012-05-24 16:54:22

标签: knockout.js

我已经查看了类似问题的一些相关搜索,但是我尝试匹配工作结果并不重要,我似乎无法弄清楚以下代码有什么问题。

<div data-bind="foreach: collections" >
    <div data-bind="text:name,click: $data.AddToCollectionB">
        <div data-bind="foreach: collectionB" >
        <input type="text" data-bind="value: name">
        </div>                   
    </div>
</div>

var kt = kt || {};

kt.itemA= function(n) {
    var self = this;
    self.name = n.name;
    self.collectionB = ko.observableArray(n.colB);

    self.AddToCollectionB = function () {
    self.collectionB.push(kt.itemB({ name: 'test-nested sub item' }));
    alert(self.name);
    alert(self.collectionB().length);
    };
};

kt.itemB= function(n) {
    var self = this;
    self.name = ko.observable(n.name);
};

kt.vm= new (function() {
    var self = this;
    self.collections= ko.observableArray([new kt.itemA({name:'item 1', colB: [new kt.itemB({name:'sub-item'})]}),new kt.itemA({name:'item 2', colB: []})]);
});

ko.applyBindings(kt.vm);

有人可以指出我做错了吗?

jsFiddle链接:http://jsfiddle.net/L7uxh/31/

谢谢,

1 个答案:

答案 0 :(得分:2)

当您的主text: name上有div时,它会破坏其中的内容。

你需要做一些事情,比如将name放在span div里面,如:http://jsfiddle.net/rniemeyer/L7uxh/44/