Knockout.js 动态可组合表

发布于 2024-12-09 03:50:44 字数 1069 浏览 0 评论 0原文

我正在尝试用淘汰赛 js 制作一个“动态表”，但遇到了一些困难。我想要一个“公共行模板”，其中包含变量列的嵌套模板。像这样的东西：

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

所以第二个将呈现一个模板，它看起来像这样：

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

这“有效”，但它有一个大问题：所需的< /code> 通过模板绑定嵌套在外部中，导致与标头不正确对齐（标头的结构也相同）。

我尝试使用 {{tmpl}} 语法来避免包装这让我得到了正确的 html，但是所有数据绑定和可观察的内容在动态部分中不再起作用。

有没有办法渲染一个块，保留淘汰可观察功能并避免任何包装标签？谢谢。

原文

I'm trying to make a "dynamic table" with knockout js and I'm having a bit of difficulty. I want to have a "Common Row Template" with a nested template for the variable columns. Something like this:

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

So the second <td> will render a template, which will look like this:

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

This "works" but it has a big problem: the desired <td> are nested in the outer <td> with the template binding, causing improper alignment with the header (which also is structured the same way).

I tried using the {{tmpl}} syntax to avoid the wrapping <td> and this gets me the right html, but all the databinding and observable don't work anymore in the dynamic part.

Is there a way to render a block of <td> preserving the knockout observable functionality and avoiding any wrapping tag? Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清风无影 2024-12-16 03:50:44

您最好的选择是考虑使用 KO 1.3测试版。以下是执行您想要的操作的示例： 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>

Your best option is to look at using KO 1.3 beta. Here is a sample of doing something like what you want: 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>

回复收藏 0 原文

~没有更多了~