Question

我正试图用淘汰赛制作一个“动态表”，我遇到了一些困难。我希望有一个“公共行模板”，其中包含变量列的嵌套模板。像这样：

<script type="text/x-jquery-tmpl" id="CommonRow">
<td><input type="text" data-bind="value: Nome" /></td>
<td data-bind="template: { name: $item.LabelOne + 'Row' }"></td>
<td><button class="fancybox edit" data-bind="click: Edit">Modifica</button></td>
<td><button class="remove" data-bind="click: Remove">Rimuovi</button></td>
</script>

因此第二个<td>将呈现一个模板，如下所示：

<script type="text/x-jquery-tmpl" id="ScalaRow">
<td><input type="text" data-bind="value: PianiFuoriTerra" /></td>
<td><input type="text" data-bind="value: Foo" /></td>
</script>

这“有效”，但它有一个很大的问题：所需的<td>嵌套在外部<td>中，并带有模板绑定，导致与标题的不正确对齐（也以相同的方式构造）。

我尝试使用{{tmpl}}语法来避免包装<td>，这样我就得到了正确的html，但是所有的数据绑定和observable都不再适用于动态部分。

有没有办法渲染<td>块保留挖掘可观察功能并避免任何包装标记？感谢。

Answer 1

您最好的选择是使用KO 1.3 beta。这是一个做你想做的事情的样本：http://jsfiddle.net/rniemeyer/wmDfv/

<table data-bind="foreach: items">
    <tr>
        <td data-bind="text: name"></td>
        <!-- ko template: type -->
        <!-- /ko -->
    </tr>
</table>

<script id="typeA" type="text/html">
    <td>typeA template</td>
</script>

<script id="typeB" type="text/html">
    <td>typeB template</td>
</script>

Knockout.js动态可组合表

1 个答案: