Question

我在使用无容器foreach嵌套在表中的普通foreach绑定中时遇到问题。添加您自己的<tbody> found here的解决方案无效，如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

你应该使用它 因为您在foreach: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>

选中 DEMO

KnockoutJS中的嵌套无容器foreach

1 个答案: