Question

I am having problems using containerless foreach nested inside a normal foreach binding within a table. The solution of adding your own <tbody> found here does not work as seen in this jsFiddle.

HTML

<table style="border: solid 1px black;">
    <thead>
        <tr>
            <th>Name</th>
            <!-- ko foreach: data -->
            <th data-bind="text: $data.name"></th>
            <!-- /ko -->
        </tr>
    </thead>
    <tbody data-bind="foreach: names">
        <tr>
            <td data-bind="text: $data.name"></td> 
            <!-- ko foreach: data -->
            <td data-bind="text: $data.abbr"></td>
            <!-- /ko -->            
        </tr>
    </tbody>
</table>

JS

var data = {
    names: [
        { name: 'Rick' },
        { name: 'Bob'},
        { name: 'Sue' },
    ],
    data:[
        { name: 'object1', abbr: 'obj1' },
        { name: 'object2', abbr: 'obj2' },
        { name: 'object3', abbr: 'obj3' },
        { name: 'object4', abbr: 'obj4' }
    ]
};

var model = function( data ){
    this.names = ko.observableArray( data.names );
    this.data = ko.observableArray( data.data );
}
ko.applyBindings( new model( data ) );
​

The table stops rendering after the first occurence of the names.abbr binding…am I doing something wrong or is this a bug?

Answer 1

you should use it <!-- ko foreach: $parent.data -->
Because you are using it in a foreach:names, and names does not have any property with name, and you want to access its parent data so, use $parent to access its parent

Like

<tbody data-bind="foreach: names">
    <tr>
        <td data-bind="text: $data.name"></td> 
        <!-- ko foreach: $parent.data -->
        <td data-bind="text: $data.abbr"></td>
        <!-- /ko -->            
    </tr>
</tbody>

Check this DEMO