Recursive template Ember/Handlebars

Question

For some reason, I can't call my helper in my template. It throws an error saying that my helper is undefined.

I've got the following code :

<script type="text/x-handlebars" id="catalog">
    <div class="col-md-10">
        <ul class="list-group">
            {{#each catalog.catalog_categories}}
               {{categoryHelper this}} // This works !!!
            {{/each}}
        </ul>
    </div>
</script>

<script id="categories-template" data-template-name='test' type="text/x-handlebars-template">
    <a data-toggle="collapse" href=".collapse{{ category.category_id }}" data-target=".child{{ category.category_id }}">
        <li class="list-group-item">
           {{ category.category_name_fr_sh }} // French name of category
        </li>      

    </a>
    {{#if category.category_children}}     
        {{#each category.category_children}} 
            {{categoryHelper this}} // This throw error saying that the helper is undefined
        {{/each}}
    {{/if}} 
</script>

//app.js
Ember.Handlebars.helper('categoryHelper', function(category) {
    var template = Handlebars.compile($('script#categories-template').html());
    return new Handlebars.SafeString(template({category: category}));
});

EDIT: Here's a jsfiddle http://jsfiddle.net/CycS8/

@RoyDaniels I updated my answer with a link to my jsfiddle. Thanks for helping — Michael Villeneuve

Marcio Junior Marcio Junior · Accepted Answer · 2013-11-13T23:16:08

When ember bootstrap, it will look for all templates with the selector script[type="text/x-handlebars"], script[type="text/x-raw-handlebars"], and for each template it will compile with the appropriate compiler engine:

Ember.Handlebars.compile for scripts with type="text/x-handlebars and Handlebars.compile for type="text/x-raw-handlebars.

After the compilation the script tag is removed from the dom.

Probally the $('script#categories-template').html() in your helper is returning nothing. Because the template isn't in the dom.

I think that the following could work:

templates

<script type="text/x-handlebars" id="catalog">
    <div class="col-md-10">
        <ul class="list-group">
            {{#each catalog.catalog_categories}}
               {{categoryHelper this}}
            {{/each}}
        </ul>
    </div>
</script>

<script id="categories-template" type="text/x-raw-handlebars">
    <a data-toggle="collapse" href=".collapse{{ category.category_id }}" data-target=".child{{ category.category_id }}">
        <li class="list-group-item">
           {{ category.category_name_fr_sh }} // French name of category
        </li>    
    </a>
    {{#each category.category_children}} 
        {{categoryHelper this}}
    {{/each}}
</script>

app.js

Ember.Handlebars.helper('categoryHelper', function(category) {
    var template = Ember.TEMPLATES['categories-template'];
    return new Handlebars.SafeString(template({category: category}));
});

UPDATE

Ember provide the render view helper, I think that you can get this working using the following:

<script id="catalog" type="text/x-handlebars">
    <div class="col-md-10">
        <ul class="list-group">
            {{#each catalog.catalog_categories}}
               {{render "categories-template" this}}
            {{/each}}
        </ul>
    </div>
</script>

<script id="categories-template" type="text/x-handlebars">
    <a data-toggle="collapse" href=".collapse{{ category.category_id }}" data-target=".child{{ category.category_id }}">
        <li class="list-group-item">
           {{ category.category_name_fr_sh }} // French name of category
        </li>          
    </a>
    {{#each category.category_children}} 
        {{render "categories-template" this}}
    {{/each}}
</script>

Recursive template Ember/Handlebars

2 Answers