Question

我正在尝试使用Handlebars渲染节点层次结构。我使用require.js和plugin for Handlebars来提取相关模板。我试图以部分递归方式失败的尝试失败了。

示例数据

var data = {
    nodes: [
        {
            title: "node 1",
            nodes: [
                {title: "node 1-1"},
                {title: "node 1-2"}
            ]
        },
        {
            title: "node 2"
        }
    ]
};

需要致电

require(['hbs!templates/linker/sub'], function(tpl) {
    console.log(tpl(data));
});

基本模板
模板/接头/分

{{#if nodes}}
<ul>
    {{#each nodes}}
        <li>{{title}}
        </li>
    {{/each}}
</ul>
{{/if}}

输出（成功）

<ul>
   <li>node 1</li>
   <li>node 2</li>
</ul>

带有部分的

模板 templates / linker / sub2 ，将以前的模板称为部分

{{#if nodes}} <ul> {{#each nodes}} <li>{{title}} {{> templates_linker_sub }} </li> {{/each}} </ul> {{/if}}

输出（成功）

<ul> <li>node 1 <ul> <li>node 1-1</li> <li>node 1-2</li> </ul> </li> <li>node 2</li> </ul>
带有递归部分的
模板
templates / linker / sub3 ，将自身称为部分

{{#if nodes}} <ul> {{#each nodes}} <li>{{title}} {{> templates_linker_sub3 }} </li> {{/each}} </ul> {{/if}}

输出（失败）

require.js超时，没有输出。

假设我可以在此设置中使用递归部分，我是错误的吗？或者我在编写模板时遗漏了什么？

Answer 1

作为一种解决方法，我定义了一个自定义帮助程序来应用以前注册的部分。部分已经编译，可通过Handlebars.partials

获得

define(['Handlebars', 'underscore'], function (Handlebars, _) {
    function partial(template, context, options) {
        var f = Handlebars.partials[template];
        if (!_.isFunction(f)) {
            return "";
        }

        return new Handlebars.SafeString(f(context));
    }
    Handlebars.registerHelper('recursivepartial', partial);
    return partial;
});

我修改的模板看起来像

{{#if nodes}}
<ul>
{{#each nodes}}
    <li>{{title}}
        {{recursivepartial "templates_linker_sub" this}}
    </li>
{{/each}}
</ul>
{{/if}}

Answer 2

我知道这已经很老了，但我刚刚为require-handlebars-plugin repo创建了一个pull请求来修复问题。此时，插件将解析partial并将所有引用的partials添加为依赖项（因此创建循环引用。）见这里：https://github.com/SlexAxton/require-handlebars-plugin/pull/229

Handlebars.js和require.js的递归部分

2 个答案: