Mustache.jsrecursion
我正在尝试使用Mustache.js构build一个html树,但是它无法抛出“最大调用堆栈大小超出”,可能是因为无限recursion。
怎么了?
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);
这个问题是在Mustache.js(免责声明:不确定问题是否在规范本身)的实现中固有的,因为当algorithm在当前上下文中找不到它时,会在其父级上查找该属性。
简要解释一下:代码在你的模板上运行,输出Gar1<ul>
并find一个{{#children}}
标签。 由于你的上下文有一个子标签,它输出<li>
并调用现在在内部上下文{title: 'gar2'}
上运行的部分。 当小胡子再次到达你的{{#children}}
标签时,它现在发现当前的上下文没有children
属性,因此它在上一层的地方find你的子属性并开始recursion(这是一个真正的单词吗?再次本身就像疯了一样。
两种可能的解决方
1 –修改您的数据,以便所有条目都有一个children
属性,并且当一个节点不应该有子节点将其设置为false
或null
(不是一个空数组),如下所示:
var root = { title: 'Gar1', children: [{title: 'gar2', children: false}, {title: 'gar3', children: [{title: 'gar4', children: false}]}] };
2 –使用把手而不是胡须,并将<ul>
包裹在{{#if children}}
标签中。
希望这有帮助,我知道答案是有点迟了,因为这已经被问到。
这是一个需要recursion的对象。
目的
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
那么它是一个对象,打印出它的键,并recursion调用模板的值。 如果不是一个对象,那么不需要recursion,只需打印出来。
呈现客户端。
// 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渲染是否支持recursion或不。