我不知道如何处理模板中的递归数组。我在handlebarsjs的文档中找不到任何内容
有我的代码: JS:
var branch = [{ name:"firstLayerNodeA", has_branch:true, branch:[{ name:"secondLayoutNodeA", has_branch:false },{ name:"secondLayoutNodeB", has_branch:true, branch:[{ name:"thirdLayerNodeA", has_branch:true, branch:[{ //fourth Layer //fifth Layer //..... }] }] }] },{ name:"firstLayerNodeB", has_branch:false }]
HTML
<Template name="tree"> <ul> {{#each brach}} <li> name {{#if has_branch}} <ul> {{#each brach}} <li> name {{#if has_brach}} {{#each brach}} .....third layer .....fourth layer .... {{/each}} {{/if}} </li> {{/each} </ul> {{/if}} </li> {{/each}} </ul> </Template>
有很好的想法可以处理模板中的分支吗? 任何帮助表示赞赏。
答案 0 :(得分:4)
您可以使用嵌套模板:
客户端js
Template.tree.branch = function() {
var branch = ...
return branch;
}
<强> HTML 强>
<template name="tree">
<ul>
{{#each branch}}
<li>
{{>branch}}
</li>
{{/each}}
</ul>
</template>
<template name="branch">
{{name}}
{{#if branch.length}}
<ul>
{{#each branch}}
<li>
{{>branch}}
</li>
{{/each}}
</ul>
{{/if}}
</template>
另外,您并不需要has_branch
。只需检查分支数组的长度,因为只有它的数组和那里的东西
答案 1 :(得分:2)
Akshat's answer非常好。
但是,使用它我在事件处理方面遇到了一些问题。这次活动被抓了好几次;对包含抛出事件的元素的branch
模板的每个实例执行一次。
不确定这是一个错误还是一个功能......无论如何,我可以使用以下方法克服它:
Template.branch.events({
'click': function (e,b) {
console.log("this will show up as often as deep your tree is");
if (this._id==b.data._id)
console.log("this will show up only once");
}
});