0

テーブル内の通常の 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...何か間違っているのでしょうか、それともバグですか?

4

1 に答える 1

3

あなたはそれを使用する必要が<!-- ko foreach: $parent.data --> あります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>

このデモをチェック

于 2012-10-31T05:36:40.157 に答える