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

我必须呈现一个列数可变的复杂表。在本例中，列数取决于子程序的类型。例如，如果子程序类型为1，则有3个动作；如果子程序类型为2，则有4个动作。加在一起是7个动作，所以我的表有7列（+前两列，我在其中呈现子代码名称和类型（子代或子代等），但这不太重要。前两列始终存在），所以7+2=9列。子视图是从树中添加的（示例图片上没有绘制，因为它与此问题无关）

我让它在InternetExplorer中工作，因为我使用字体标签来钩住一个敲除模板，但MozillaFirefox和GoogleChrome无法呈现这个

我的问题是：如何在没有字体标签的情况下在表格中绘制此内容？

我不会反对其他标签，只要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>

我的列表操作

行模板：

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

拯救
X

子工作流模板：

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

X

动作模板：

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

行动内容

图片：

支持无容器控制流。您可以改为使用注释语法，它与

if

、

ifnot

、

foreach

、

with

和

模板绑定一起使用

是库作者编写的工作代码

例如：

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


这里是一个静态标题项




更新：
是一个修改过的customg
模板，带有选项
绑定（原始版本）。您可以将选项传递给，这些选项将映射到输入项上的每个
$options
属性

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

在结合了所有这些链接和代码片段之后，我的三重foreach
模板工作！关键是，当您使用$options时，$parent和
类似的标记，不能使用jquery模板。所以现在我的代码是
jquery模板免费