Knockout nested observableArray not binding

Question

I have looked at a few related searches on similar issues but it doesn't matter how close I try to match the working result I cannot seem to figure out what is wrong with the following code.

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

Could anyone please point out what I am doing wrong?

jsFiddle link: http://jsfiddle.net/L7uxh/31/

Thanks,

RP Niemeyer RP Niemeyer · Accepted Answer · 2012-05-24T18:46:36

When you have text: name on your main div, it clobbers the content inside of it.

You would need to do something like put the name in a span inside of the div like: http://jsfiddle.net/rniemeyer/L7uxh/44/

Knockout nested observableArray not binding

1 Answers