javascript - 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 中的实现所固有的(免责声明:不确定问题是否出在规范本身中)，因为算法在其 parent 上查找属性时无法找到在当前上下文中找到它。

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

两种可能的解决方案:

1 - 修改您的数据，以便所有条目都有 children属性，当一个 Node 不应该有子 Node 时，将其设置为 false或 null (不是空数组)像这样:

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

2 - 使用 Handlebars 代替 Mustache，并包裹 <ul>在 {{#if children}}标记。

希望这会有所帮助，因为有人问过这个问题，我知道答案有点晚了。