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

2019-06-13 23:26:31 阅读：117 来源： 互联网

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

> [姓名]
> [俱乐部]
> [Dynamic1]
> [动态2]
> [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.

解决方法:

如果您使用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选项.如果您的列经常动态更改,则会失去一些效率.如有必要,我可以为这两个选项提供样本.

标签：javascript,knockout-js
来源： https://codeday.me/bug/20190613/1235888.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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