带有嵌套模板的 Javascript 框架或 knockoutjs 库答案

【问题标题】：Javascript frameworks or knockoutjs library with nested Templating带有嵌套模板的 Javascript 框架或 knockoutjs 库
【发布时间】：2011-04-19 21:30:38
【问题描述】：

我可以在例如 kockoutjs 库中使用多个层次结构进行嵌套模板吗？ http://knockoutjs.com/ 或任何其他 Javascript 框架？

我有这个观点：

DataGrid:
Cell1, Cell2, Cell3, Within Cell4 is a ListBox.

无论它在 html 中是什么样子。是否可以使用 knockoutjs 或任何其他 javascript 框架来创建具有多个层次结构的嵌套模板？

【问题讨论】：

标签： javascript templates nested knockout-templating

【解决方案1】：

是的，在淘汰赛中是可能的。

您可以在根元素内指定模板名称：

<ul data-bind="template: {name: listItemTmpl, foreach: items()}"></ul>

然后在该模板中，您还可以通过data-bind 属性引用其他模板：

<script id="listItemTmpl" type="text/x-jquery-tmpl">
    <li>
        <h3 data-bind="text: name"></h3>
        <div data-bind="template: itemDetailsTmpl"></div>
    </li>
</script>

Knockout 将应用根模板绑定，并在遇到该模板内的data-bind 属性时递归应用这些属性。

在我的示例中，它将为每个items() 应用listItemTmpl，然后对于每个应用itemDetailsTmpl 来显示详细信息。

就性能而言，它非常快速且用户不易察觉。

我在当前项目中以这种方式使用剔除模板，递归模板让我可以将部分标记保持在小部分中。

这是您要找的东西吗？

【讨论】：

很酷，你已经回答了。我还有一个关于来自 wpf 背景的模板的力量的问题......当我在 Cell4 中有这个 ListBox 时，我是否也可以在 ListBox 下放置 3 个按钮，如 add、del、open 以便 ListBox 和 3 个按钮是在那个 Cell4 内？ 3 个按钮用于对 ListBox 项进行操作:)
是的，你可以。模板只是 HTML 的一部分。 HTML 是分层的，没有什么能阻止您将元素嵌套在其他元素中。
好吧，关于模板，knockoutjs 几乎像 silverlight 一样强大，但更多的浏览器支持。一个跳silverlight并选择带有jquery+knockoutjs的asp.net mvc的理由。