title: Recursive template Ember/Handlebars
body: <p>For some reason, I can't call my helper in my template. It throws an error saying that my helper is undefined.</p>
  
  <p>I've got the following code : </p>
  
  <pre><code>&lt;script type="text/x-handlebars" id="catalog"&gt;
      &lt;div class="col-md-10"&gt;
          &lt;ul class="list-group"&gt;
              {{#each catalog.catalog_categories}}
                 {{categoryHelper this}} // This works !!!
              {{/each}}
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script id="categories-template" data-template-name='test' type="text/x-handlebars-template"&gt;
      &lt;a data-toggle="collapse" href=".collapse{{ category.category_id }}" data-target=".child{{ category.category_id }}"&gt;
          &lt;li class="list-group-item"&gt;
             {{ category.category_name_fr_sh }} // French name of category
          &lt;/li&gt;      
  
      &lt;/a&gt;
      {{#if category.category_children}}     
          {{#each category.category_children}} 
              {{categoryHelper this}} // This throw error saying that the helper is undefined
          {{/each}}
      {{/if}} 
  &lt;/script&gt;
  
  //app.js
  Ember.Handlebars.helper('categoryHelper', function(category) {
      var template = Handlebars.compile($('script#categories-template').html());
      return new Handlebars.SafeString(template({category: category}));
  });
  </code></pre>
  
  <p>EDIT: 
  Here's a jsfiddle 
  <a href="http://jsfiddle.net/CycS8/" rel="nofollow">http://jsfiddle.net/CycS8/</a></p>