Question

我想要一些类似以下的HTML：

<table>
    <tbody>
        <tr data-bind="foreach: foo">
            <td>some header</td>
            <td data-bind="value: bar"></td>
        </tr>
    </tbody>
</table>

我想要通过Knockout foreach绑定生成重复的单元格。但是，如果有一个我不想重复的标题单元格，我怎么能这样做呢？绑定后所需的输出类似于：

<table>
    <tbody>
        <tr>
            <td>some header</td>
            <td>fred</td>
            <td>wilma</td>
            <td>barney</td>
            <td>bam-bam</td>
        </tr>
    </tbody>
</table>

同样的问题适用于标题行。如果foreach绑定位于<tr>元素上，我如何告诉Knockout不要重复第一行或单元格？

Answer 1

您可以使用无容器版本的绑定（请参阅documentation：使用foreach而不使用容器元素部分）

<table>
    <tbody>
        <tr>
            <td>some header</td>
            <!-- ko foreach: foo -->
                <td data-bind="text: bar"></td>
            <!-- /ko -->
        </tr>
    </tbody>
</table>

演示JSFiddle。

因此，如果您想要一个固定的标题行，可以使用相同的技术：

<table>
    <tbody>
        <tr>
            <td>some header</td>
        </tr>
        <!-- ko foreach: foo -->
            <tr>
                <td data-bind="text: bar"></td>
            </tr>
        <!-- /ko -->   
    </tbody>
</table>

Answer 2

您可以使用此

<table>
    <tbody>
        <tr>
            <td>Some header</td>
            <!-- ko foreach: foo -->
            <td data-bind="value: bar"></td>
            <!-- /ko -->
        </tr>
    </tbody>
</table>

重复tr你可以使用同样的决定，但最好使用html的可能性

<table>
    <thead>
        <tr>
            <td> Header </td>
        </tr>
    </thead>
    <tbody>
        <tr data-bind="foreach: foo">
            <td data-bind="text: bar"></td>
        </tr>
    </tbody>
</table>

淘汰赛中的头排

2 个答案: