如何呈现具有一些固定列和一些动态列的表格

Question

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

• [Name]
• [Club]
• [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>
}

我的问题是 colTmpl 中的 tds 不是 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 选项。如果您的列经常动态变化，您会损失一些效率。如有必要，我可以提供这两个选项的示例。

Answer 2

这是因为 的内容被您指定的模板替换。

如果您这样做：

<script id="rowTmpl" type="text/html">
<tr> 
    <td data-bind="text: name"></td>
    <td data-bind="text: club"></td>
    <td data-bind="template: { name: 'colTmpl', foreach: radios }" ></td>
</tr>
</script>
<script id="colTmpl" type="text/html">
    <span> . aa . </span>
</script>

它将呈现。