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);
});

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>