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>
}

我的问题是colTmpl内的tds不是databoud，它是空的，放在第三列后面的文字'aa'。请参阅此fiddle。

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

这是因为<tr data-bind="template: { name: 'colTmpl', foreach: radios }" >的内容将被您指定的模板替换。

如果您改为：

<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>

它会渲染。

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

2 个答案: