Nested Repeaters Using Table Tags

问题

I am using the following code to try and use nested repeaters in WinJS:

<table class="grid" id="rptCustomerHistory" data-win-control="WinJS.UI.Repeater">
    <thead>
        <tr>
            <th colspan="4" class="groupHeader" data-win-bind="textContent: GroupDate.DateTime BindingConverter.toYearMonthDate"></th>
        </tr>
    </thead>
    <tbody data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: ch">
        <tr>
            <td data-win-bind="textContent: ContactDate.DateTime BindingConverter.toshortdate"></td>
            <td data-win-bind="textContext: SalesPerson"></td>
            <td data-win-bind="textContext: ContactMethod"></td>
            <td><span class="symbol">&#xe23a;</span></td>
        </tr>
    </tbody>
</table>

However, it is not rendering any results for the 2nd repeater.

When I use the same data source and similar markup using DIVs, it works:

<div id="rptCustomerHistory" data-win-control="WinJS.UI.Repeater">
    <div>
        <div data-win-bind="textContent: GroupDate.DateTime BindingConverter.toYearMonthDate"></div>
        <div data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: ch">
            <span data-win-bind="textContent: ContactMethod"></span>
        </div>
    </div>
</div>

I don't really want to use Divs as this is tabular data. Any idea why using table tags behaves differently?

回答1:

Did you assign give data to your outer repeater?

The following works in a blank project for me:

<script>
    window.list = new WinJS.Binding.List([
        new WinJS.Binding.List([1, 2, 3]),
        new WinJS.Binding.List([4, 5, 6]),
    ]);
</script>
<div data-win-control="WinJS.UI.Repeater" data-win-options="{ data: list }">
    <span data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data : this"></span>
</div>

回答2:

Try replacing

data-win-bind="winControl.data: ch"

with:

data-win-options="{data: ch}"

来源：https://stackoverflow.com/questions/22809297/nested-repeaters-using-table-tags