knockout.js - knockout.js 和渲染表

Question

是否可以在没有无容器控制流语法并具有有效 html 的情况下在下面呈现相同的内容？

<tbody data-bind="foreach: dates">
        <tr>
            <td class="empty"></td>
            <td class="date-container" data-bind="attr: { colspan: $parent.gymCourts().length }">
                <div class="date" data-bind="html: date"></div>
            </td>
        </tr>
        <!-- ko foreach: times -->
        <tr class="time-games">
            <td class="time-container">
                <div class="time" data-bind="html: time"></div>
            </td>
            <!-- ko foreach: games -->
            <td class="game-container">
                <div class="game">
                    <span data-bind="html: awayTeam.name"></span> vs. <span data-bind="html: homeTeam.name"></span>
                </div>
            </td>
            <!-- /ko -->
        </tr>
        <!-- /ko -->
    </tbody>

Answer 1

您可以在一个表格中放置多个tbody元素，因此如果您能够将您foreach的元素放在table元素上，那么您可以执行以下操作：

​<table data-bind="foreach: dates">
   <tr>
        <td></td>
        <td data-bind="html: date">

        </td>
   </tr>
   <tbody data-bind="foreach: times">
        <tr>
            <td></td>
            <td data-bind="html: time">

            </td>
        </tr>       
    </tbody>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Answer 2

我不这么认为，但是如果您<div>在“表格模式”中使用标签，我认为您可以：

<div data-bind="foreach: dates">
    <div style="display: table-row">
        <div style="display: table-cell"></div>
        <div style="display: table-cell" data-bind="html: date"></div>
    </div>
</div>
<div data-bind="foreach: times">
    <div style="display: table-row">
        <div style="display: table-cell"></div>
        <div style="display: table-cell" data-bind="html: time"></div>
    </div>
</div>