我正在尝试用 knockout js 制作一个“动态表”,但遇到了一些困难。我想要一个带有可变列嵌套模板的“公共(public)行模板”。像这样:
<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>
与模板绑定(bind),导致与 header 的不正确对齐(其结构也是相同的)。
我尝试使用 {{tmpl}} 语法来避免包装 <td>
这为我提供了正确的 html,但所有数据绑定(bind)和可观察对象在动态部分不再起作用。
有没有办法渲染 <td>
的 block ?保留 knockout 可观察功能并避免任何包装标签?谢谢。
最佳答案
您最好的选择是查看使用 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>
关于javascript - Knockout.js 动态组合表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7710913/