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

时间:2011-04-19 21:30:39

标签: javascript templates nested knockout-templating

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

我有这个观点:

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

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

1 个答案:

答案 0 :(得分:0)

是的,可以在Knockout中使用。

您可以在根元素中指定模板名称:

<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属性时,它会以递归方式应用这些属性。

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

性能方面,用户非常快速且无法察觉。

我在当前项目中以这种方式使用knockout模板,并且递归模板让我将部分标记保存在小部分中。

这是你要找的东西吗?