bố trí đệ quy với Handlebars.js

Question

Tôi có một hệ thống phân cấp đối tượng đơn giản bao gồm:

Category 
String name 
List childCategories; 

tôi muốn đại diện cho cách bố trí này sử dụng tay lái một cách chung chung, nhưng tôi đang gặp khó khăn hiểu làm thế nào để bố trí làm tổ. Với bố cục này:

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

Cách tốt nhất để sử dụng lại mẫu danh mục hiện có cho tất cả các danh mục con là gì? Có cần đăng ký một người xử lý không? Có cách nào dễ hơn không?

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

Hai mẫu

<!-- 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> 

Và một Helper tay lái

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