如何使用一些固定列和一些动态列呈现表

Question

我想得到一个包含这些列的表:

• [名称]
• [俱乐部]
• [Dynamic1]
• [Dynamic2]
• [Dynamic3]
• 等等

我试过这个:

<table>
    <tbody data-bind="template: { name: 'rowTmpl', foreach: runners }">
    </tbody>
</table>
<script id="rowTmpl" type="text/html">
    <tr data-bind="template: { name: 'colTmpl', foreach: radios }" >
        <td data-bind="text: name"></td>
        <td data-bind="text: club"></td>
    </tr>
</script>
<script id="colTmpl" type="text/html">
        <td>aa</td>
</script>
@section Scripts{
    <script src="/Scripts/knockout-1.3.0beta.js" type="text/javascript"></script>
    <script type="text/javascript">
        var vm = {
            id: 1,
            name: 'H21',
            radios: ['2km', '4km', 'mål'],
            runners: ko.observableArray([
                { name: 'Mikael Eliasson', club: 'Göteborg-Majorna OK', radios: ko.observableArray([{}, {}, {}]) },
                { name: 'Ola Martner', club: 'Göteborg-Majorna OK', radios: ko.observableArray([{}, {}, {}]) }
            ])
        };

        ko.applyBindings(vm);
    </script>
}

我的问题是里面的tds colTmpl不是databoud,它是空的,放在第三列后面有文字'aa'.看到这个小提琴.

Answer 1

如果你使用1.3 beta(你的小提琴是引用最新的版本),那么你可以这样做:

<table>
    <tbody data-bind="foreach: runners">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: club"></td>
            <!-- ko foreach: radios-->
            <td>aa</td>
            <!-- /ko -->
        </tr>
    </tbody>
</table>

此处示例:http://jsfiddle.net/rniemeyer/bd7DT/

如果您需要在1.3之前使用jQuery模板执行此操作,那么您可能希望通过templateOptions将数组中的第一项传递到模板中,并{{if}}检查您是否在第一个无线电上并渲染两个单元格.jQuery模板中的另一个选项是使用{{each}}动态单元格而不是foreach父模板绑定选项.如果您的列经常动态更改,则会失去一些效率.如有必要,我可以为这两个选项提供样本.