KnockoutJS渲染具有多个模板和可变列数的表

Question

我必须渲染一个具有可变列数的复杂表.在此示例中,列数取决于subRow的类型.例如,如果subRow是类型1,则它有3个动作,如果subRow类型是2,则它有4个动作.一起是7分的动作,所以我的表中有7列(+前两个,我渲染子行名称和类型(后代或子女等),但是这是不那么重要了.这前两列始终存在),因此7 + 2 = 9列.从树中添加子画(未在示例图片上绘制,因为它与此问题无关).

我使它在Internet Explorer中工作,因为我使用字体标记来挂钩淘汰模板,但是Mozilla Firefox和谷歌浏览器无法呈现这一点.

我的问题是:如何在表中绘制,没有字体标记？

我不会对任何其他标签有任何反对意见,只要Firefox可以渲染它,但我尝试了大部分标签,而你不做这个工作.

使用伪代码和图片,一切都会更清晰:

HTML:

<table>
<thead>
    <tr>
        <!--

            So this is the table header. It defines number of columns in this table. Number of columns is variable, and this is the first part of the problem. 

        -->
        <th class="tablehead" colspan="2">My List</th><th class="tablehead" data-bind="attr: { colspan: distinctActions().length }"> Actions </th><th class="tablehead"></th>
    </tr>
</thead>  

<tbody>

<tbody data-bind="template: { name: 'rowsTemplate', foreach: rowList } "></tbody>       

</tbody>

行模板:

<script type="text/x-jquery-tmpl" id="rowsTemplate">
<tr>
    <td>  
        <button data-bind="click: save, enable: editMode()">Save</button>
    </td>
    <td>
        <button data-bind="click: deleteRow, enable: !editMode()">X</button>
    </td>
</tr>

<!-- 

    this is the tricky part
    for each "row" in this template i must repeat X subRows.
    only way I found to do it is to "hook" subRowsTemplate on a  <font> tag.
    BUT the problem is only Internet Explorer is able to render this, neither
    Mozilla Firefox or Chrome are able to do it.

    (Everything MUST be in the same table, because of the 
    variable number of columns (defined in header))

 -->

<font data-bind="template: { name: 'subRowsTemplate', foreach: objectList, templateOptions: { tmpRow: $data } } "></font>

子行模板:

</script>   

<script type="text/x-jquery-tmpl" id="subRowsTemplate">
<tr>
    <td> <span data-bind="text: name"></span>  </td>
    <td> 
        <input readonly="readonly" data-bind="visible: selectorList.length>0 && !$item.tmpRow.editMode(), value: chosenSelector().label"></input>
        <select data-bind="visible: selectorList.length>0 && $item.tmpRow.editMode(), options: selectorList, optionsText: 'label', value: chosenSelector"></select>
    </td>

    <!--

        Again the same problem as above, IF subRow IS first, i must draw ALL the actions (defined above in header).
        So, if I have 3 actions defined in header, I must draw 3 <td> here. And again I have the same "solution",
        which doesn't work in Mozilla and Chrome.

    -->     

    <font data-bind="template: { name: 'actionTemplate', foreach: skill, templateOptions: { tmpParentIsFirst: isFirst, tmpObject: $data, tmpRow2: $item.tmpRow } }">  </font>
    <td><div style="float:right;"><button data-bind="click: deleteRow">X</button></div></td>
</tr>

行动模板:

</script>

<script type="text/x-jquery-tmpl" id="actionTemplate">
<td>
    <div>
        Content of action
    </div>
</td>
</script>

图片:

Answer 1

Knockout.js 2.0支持无容器控制流。您可以改用注释语法，它适用于if、ifnot、foreach、with和template绑定。

这是该库作者的工作代码。

例子：

<ul>
  <li><strong>Here is a static header item</strong></li>
  <!-- ko foreach: products -->
  <li>
    <em data-bind="text: name"></em>
  </li>
  <!-- /ko -->
</ul>

更新：

这是修改后的自定义templateWithOptions绑定（ Ryan Niemeyer的原始版本）。您可以将选项传递给将映射到$options输入项上的每个属性的选项。

cs.tropic仅供参考，他运行后的评论：

组合所有这些链接和代码片段后，我的三重 foreach 模板就可以工作了！至关重要的是，当你使用 $options、$parent 和类似标签时，你一定不能使用 jquery 模板。所以现在我的代码是免费的 jquery 模板