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

Question

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

我有这个视图：

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

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

Answer 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- 时应用根模板绑定。在该模板内绑定属性，它会递归地应用这些属性。

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

就性能而言，它的速度非常快并且用户不会注意到。

我在当前的项目中以这种方式使用淘汰模板，递归模板使我可以将部分标记组织在小部分中。

这是您正在寻找的东西吗？