Рекурсивный шаблон Ember/Handlebars

Question

По какой-то причине я не могу позвонить своему помощнику в свой шаблон. Он выдает ошибку, говоря, что мой помощник не определен.

У меня есть следующий код:

<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: Вот jsfiddle http://jsfiddle.net/CycS8/

Answer 1

Когда уголек самозагрузка, он будет искать все шаблоны с селектором script[type="text/x-handlebars"], script[type="text/x-raw-handlebars"], и для каждого шаблона он будет компилировать с соответствующим двигателем компилятора:

Ember.Handlebars.compile для сценариев с type="text/x-handlebars и Handlebars.compile для type="text/x-raw-handlebars.

После компиляции метка сценария удаляется из dom.

Возможно, $('script#categories-template').html() в вашем помощнике ничего не возвращает. Потому что шаблон не находится в dom.

Я думаю, что следующий может работать:

шаблоны

<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 обеспечивает помощник render зрения, я думаю, что вы можете получить эту работу, используя следующую:

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

Answer 2

Ваш тип неправильно, он должен быть type="text/x-handlebars" в вашем test шаблоне.