Mustache.js递归

Question

我正在尝试使用Mustache.js构建一个html树，但它抛出了一个“超过最大调用堆栈大小”的错误，可能是因为无限的递归。

怎么了？

var Mustache = require('mustache');

var root = {
    title: 'Gar1',
    children: [{title: 'gar2'}, {title: 'gar3', children: [{title: 'gar4'}]}]
};

var panelTemplate = '{{title}}<ul>{{#children}}<li>{{>panel}}</li>{{/children}}</ul>';

var partials = {panel: panelTemplate};
var output = Mustache.render(panelTemplate, root, partials);


console.log(output);

Answer 1

这个问题是Mustache.js中的实现所固有的(免责声明:不确定问题是否在规范本身中)，因为当算法在当前上下文中找不到某个属性时，它会在其父级上查找该属性。

简单地解释一下:代码在您的模板上运行，输出Gar1<ul>并查找{{#children}}标记。因为您的上下文有一个子标记，所以它输出<li>并调用现在将在内部上下文{title: 'gar2'}上运行的partial。当Mustache再次到达您的{{#children}}标记时，它现在发现当前上下文没有children属性，因此它进入上一级，实际找到您的子属性并开始递归(这是一个真实的单词吗？)再一次像疯了一样。

两种可能的解决方案：

1 -修改您的数据，使所有条目都具有children属性，并且当节点没有子节点时，将其设置为false或null (不是空数组)，如下所示：

var root = {
    title: 'Gar1',
    children: [{title: 'gar2', children: false}, {title: 'gar3', children: [{title: 'gar4', children: false}]}]
};

2 -使用Handlebar而不是Mustache，并将<ul>包装在{{#if children}}标签中。

希望这有帮助，我知道答案有点晚了，因为这个问题已经被问到了。

Answer 2

这里有一个需要递归的对象。

对象

var obj = [
    {
        obj: true,
        key: 'a',
        value: [
            {
                obj: false,
                key: 'a',
                value: 1
            },
            {
                obj: false,
                key: 'b',
                value: 2
            },
            {
                obj: true,
                key: 'c',
                value: [
                    {
                        obj: false,
                        key: 'a',
                        value: 3
                    }
                ]
            }
        ]
    },
    {
        obj: false,
        key: 'b',
        value: 4
    }
];

模板(recursion.html)。

<!-- root -->
<ul>
    {{#value}}
    <li>
        <!-- object -->
        {{#obj}}
        <span><b>{{key}}</b></span>
        {{>object}}
        {{/obj}}
        <!-- value -->
        {{^obj}}
        <span><b>{{key}}</b> <span>{{value}}</span></span>
        {{/obj}}
    </li>
    {{/value}}
</ul>

传入的第一个对象是根，它没有key，只有一个value。如果value有一个属性obj设置为true，那么它就是一个对象，打印出它的键，然后为它的值再次递归调用模板。如果不是对象，则不需要递归，只需打印输出即可。

渲染客户端。

// html is recursion.html contents
var template = Hogan.compile(html),
    content = template.render({value: obj}, {object: html});
// show the rendered template
$('body').empty().append(content);

使用Express.js渲染服务器端

res.render('recursion', {
    value: obj,
    partials: {
        object: 'recursion'
    }
});

此示例的输出

http://jsfiddle.net/simo/GYjMY/

顺便说一句，我使用Hogan.js来渲染模板。我不知道Mustache.js render是否支持递归。