Recursive layouts with Handlebars.js

Question

I have a simple object hierarchy consisting of:

Category
 String name
 List childCategories;

I would like to represent this layout using handlebars in a generic way, but I am having trouble understand how to nest 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 the child categories? Is it necessary to register a handler? Is there an easier way?

Answer 1

Two templates

<!-- 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 a Handlebars Helper

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