更新

Question

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

我在互联网资源管理器中工作，因为我使用字体标记挂钩淘汰模板，但是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绑定。

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绑定（原始版本为Ryan Niemeyer）。您可以将选项传递到将被映射到输入项上的每个$options属性。

仅供cs.tropic运行后的评论：

结合所有这些链接和代码片段后，我的三重foreach 模板有效！重要的是，当你使用$ options，$ parent和类似的标签，你不能使用jquery模板。所以现在我的代码是 jquery模板免费

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

1 个答案:

更新