javascript - KnockoutJS 呈现具有多个模板和可变列数的表

Question

我必须渲染一个列数可变的复杂表格。在此示例中，列数取决于子行的类型。例如，如果subRow 是类型1，它有3 个 Action ，如果subRow 类型是2，它有4 个 Action 。它总共有 7 个 Action ，所以我的表有 7 列(+ 前两列，我在其中呈现子行名称和类型(后代或 child 等)，但这不太重要。前两列始终存在)，所以 7+2 = 9 列。子行是从树中添加的(示例图片上未绘制，因为它与此问题无关)。

我让它在 Internet Explorer 中运行，因为我使用字体标签 Hook 到一个挖空模板，但是 Mozilla Firefox 和谷歌浏览器无法呈现它。

我的问题是:如何在没有字体标签的情况下在表格中绘制这个？

我不会反对其他标签，只要 Firefox 和 IE 可以呈现它，但我尝试了其中的大部分，但你没有完成这项工作。

有了伪代码和图片，一切都会更加清晰:

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 和 模板绑定(bind)。

HERE 是库作者的工作代码。

例子:

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

更新:

HERE 是修改后的自定义 templateWithOptions 绑定(bind)(原始版本由 Ryan Niemeyer 提供)。您可以将选项传递给它将映射到输入项上的每个 $options 属性。

仅供引用 cs.tropic 运行后的评论:

after combining all these link and code snippets, my triple foreach template works! crucial thing is, when you use $options, $parent and similar tags, you must not use jquery templates. So now my code is jquery template free