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

编辑：这是一个jsfiddle http://jsfiddle.net/CycS8/

Answer 1

当使用ember bootstrap时，它会查找带有选择器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}));
});

<强>更新

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。

递归模板Ember / Handlebars

2 个答案: