knockout-2.0 - KnockoutJS 中的嵌套无容器 foreach

Question

我在使用嵌套在表中的普通 foreach 绑定中的无容器 foreach 时遇到问题。<tbody> 在这里找到的添加您自己的解决方案不起作用，如本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 ) );
​

表格在第一次发生names.abbr绑定后停止渲染......我做错了什么还是这是一个错误？

Answer 1

你应该使用它<!-- ko foreach: $parent.data --> 因为你在 a 中使用它foreach:names，并且 names 没有任何属性name，并且你想访问它的父数据，所以，使用$parent它来访问它的父

像

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

检查此演示