layout ricorsive con Handlebars.js

Question

Ho una gerarchia di oggetti semplice che consiste di:

Category 
String name 
List childCategories; 

vorrei rappresentare questo layout utilizzando i manubri in modo generico, ma sto avendo difficoltà a capire come layout nido. Dato questo layout:

<script id="categories-template" type="text/x-handlebars-template"> 
    {{#categories}} 
     <ul > 
      <li>      
       <span>{{name}}</span>  
       <div>{{#childCategories}}{{/childCategories}}</div> 
      </li>  
     </ul> 
    {{/categories}} 
</script> 

Qual è il modo migliore per riutilizzare il modello di categorie esistenti per tutte le categorie figlio? È necessario registrare un gestore? C'è un modo più semplice?

Answer 1

<script id="categories-template" type="text/x-handlebars-template"> 
    <ul> 
    {{#each categories}} 
     <li>      
      <span>{{name}}</span>  
      <div> 
       <ul> 
        {{#each childCategories}} 
         <li><!-- content: blah-blah-blah --></li> 
        {{/each}} 
       </ul> 
      </div> 
     </li> 
    {{/each}} 
    </ul> 
</script> 

Answer 2

Due modelli

<!-- language: html --> 

<script id="categories-template" type="text/x-handlebars-template"> 
{{#categories}} 
    <ul > 
     <li>      
      <span>{{name}}</span>  
      {{#if childCategories}}      
      <div>{{&testHelper childCategories}}</div> 
      {{/if}} 
     </li>  
    </ul> 
{{/categories}} 
</script> 

<script id="categories-nested" type="text/html"> 
    {{&testHelper categories}} 
</script> 

E un manubrio Helper

Handlebars.registerHelper('testHelper', function(info) { 
    var template = Handlebars.compile($('script#categories-template').html()); 
    return template(categories); 
});