How to use recursive template?

meteor

Solution

You can use nested templates:

client side 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>

Also you don't really need `has_branch`. Just check the length of the branch array instead as each will only loop if its an array and theres stuff in there

Problem

I don't know how to deal with recursive array in template.and I can't find anything in handlebarsjs's docs there are my codes: 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> ``` There are good ideas that deal with branch in template? Any help is appreciated.

Original source