Fractal layouts using Handlebars.js

Question

I have a simple hierarchy of objects consisting of:

Category String name List childCategories; 

I would like to introduce this layout using rudders in a general way, but it's hard for me to figure out how to deploy layouts. Given this layout:

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

What is the best way to reuse the existing categories template for all child categories? Do I need to register a handler? Is there an easier way?

Answer 1

Two patterns

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

And assistant handlebers

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

Answer 2

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