1

出于某种原因，我无法在我的模板中调用我的助手。它抛出一个错误，说我的助手未定义。

我有以下代码：

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

4

2 回答 2

2

当 ember 引导时，它将使用 selector 查找所有模板script[type="text/x-handlebars"], script[type="text/x-raw-handlebars"]，并且对于每个模板，它将使用适当的编译器引擎进行编译：

Ember.Handlebars.compiletype="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>

应用程序.js

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

更新

Ember 提供了渲染视图助手，我认为您可以使用以下方法来完成此工作：

<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>
于 2013-11-13T23:16:08.443 回答
0

您的类型错误，它应该type="text/x-handlebars"在您的test模板中。

于 2013-11-13T15:58:15.370 回答