Question

给定具有以下结构的视图模型：

- Root
    - Rows []
       - Record
       - Values[]
           - Source
           - Target

我想把它放在这样的表格中：

<table>
<thead>
     <tr><th>#</th><th>Source</th><th>Target</th></tr>
</thead>
<tbody data-bind="foreach: Rows">
    <tr>
        <td data-bind="text: Record"></td>
        <td colspan="2"></td>
    </tr>

    <tr>
        <!--- This row should repeat for every item in 'Values' --->
        <td>&nbsp;</td>
        <td data-bind="text:Source"></td>
        <td data-bind="text:Target"></td>
    </tr>
</tbody>
</table>

淘汰赛有可能吗？如果没有，我的替代方案是什么？我想将'Values'数组的值放在同一个表中，以确保列可以使用表头中的列正确调整大小。

Answer 1

你可以使用带有foreach绑定的knockout虚拟元素：

    <table>
    <thead>
         <tr><th>#</th><th>Source</th><th>Target</th></tr>
    </thead>
    <tbody data-bind="foreach: Rows">
        <tr>
            <td data-bind="text: Record"></td>
            <td colspan="2"></td>
        </tr>

    <!-- ko foreach: Values -->
        <tr>
            <td>&nbsp;</td>
            <td data-bind="text:Source"></td>
            <td data-bind="text:Target"></td>
        </tr>
    <!-- /ko -->  
    </tbody>
    </table>

参考：Using text without a containing element

Knockout：同一HTML元素中的模板实例化

1 个答案: