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元素在表中，因此，如果您能够放置table元素的foreach上，那么你可以做：

​<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>