如何使用一些固定列和一些动态列呈现表 [英] How to render a table with some fixed and some dynamic columns

问题描述

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

I want to get a table with these columns:

• [Name]


• [俱乐部]


• [Dynamic1]


• [Dynamic2]


• [Dynamic3]


• 等等。

• [Name]
• [Club]
• [Dynamic1]
• [Dynamic2]
• [Dynamic3]
• etc etc.

我试过这个：

<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 不是数据库，它是空的，放在第三列之后，文本为'aa'。请参阅此小提琴。

My problem is that the tds inside colTmpl is not databoud, it's empty and placed after the third column with the text 'aa'. See this fiddle.

推荐答案

如果您使用的是 1.3 beta （你的小提琴是引用最新的版本），然后你可以这样做：

If you are using 1.3 beta (your fiddle is referencing the latest build), then you can do this:

<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 选项。父模板绑定。如果您的列经常动态更改，则会失去一些效率。如有必要，我可以提供这两个选项的样本。

If you need to do this prior to 1.3 with jQuery templates, then you would want to pass the first item in your array into the template via templateOptions and do an {{if}} to check if you are on the first radio and render the two cells. Another option in jQuery templates is to use {{each}} around your dynamic cells rather than the foreach option of the template binding on the parent. You would lose some efficiency, if your columns are frequently changing dynamically. I can provide a sample for these two options, if necessary.

这篇关于如何使用一些固定列和一些动态列呈现表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！