递归模板 Ember/Handlebars答案

【问题标题】：Recursive template Ember/Handlebars递归模板 Ember/Handlebars
【发布时间】：2013-11-13 15:08:43
【问题描述】：

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

我有以下代码：

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

【问题讨论】：

@RoyDaniels 我用我的 jsfiddle 的链接更新了我的答案。感谢您的帮助

标签： ember.js handlebars.js

【解决方案1】：

当 ember 引导时，它将使用选择器 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>

【讨论】：

感谢您抽出宝贵时间回答。我试过你说的，Ember.TEMPLATES ['categories-template']之后的模板是未定义的。知道为什么吗？
不客气！ Ember.keys(Ember.TEMPLATES) 给你看什么？
为了方便起见，我制作了一个打印屏幕。左边是我的 html（它的 .html.twig），右边是我的 app.js，底部是 Chrome EmberJS 工具结果。 i.imgur.com/1RFgmb1.png
我稍后会看一下。但我认为您需要更改您的实现以使用 {{render "categories-template" category}} 而不是助手。因为在你的助手中你只想渲染模板吗？
嘿伙计，我感激不尽。我什至不知道渲染助手。我是 ember 新手，要学的东西太多了！我做了一些研究并最终调整了代码，现在它可以工作了。更新您的答案，也许它会在未来帮助某人。你介意我问你自从你和 ember 合作多久了？学习曲线非常难（我使用的第一个 JS MVC 框架）？再次感谢。

【解决方案2】：

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

【讨论】：

当然，现在我看了你的代码，我对它在 compile 之后的工作并不肯定，让我看看我是否可以设置一个 jsbin。
不幸的是，这不起作用。抛出错误：您必须将字符串或 Handlebars AST 传递给 Handlebars.compile。你通过了未定义的。我认为这是因为编译需要一个字符串，而您无法从 text/x-handlebars 类型中获取字符串。