车把动态部分名称

时间:2016-02-09 14:05:28

标签: dynamic handlebars.js partials

我的示例中有一个组件是手风琴,我想在其内容区域内使用不同的模板重复使用它。

我所取得的成就是创造手风琴。

<div class="c_accordion">
    {{#each data}}
    <div class="c_accordion__item">
        <h3 class="c_accordion__headline">{{this.title}}</h3>
        <div class="c_accordion__content">
            {{../template}} <-- renders [object object]
            {{> ('../template') data=this.content}}  <-- there i want to render diffrent templates
            {{> list data=this.content}}  <-- this works without problems
        </div>
    </div>
{{/each}}
</div>

现在我想在我的手风琴中呈现不同的模板(例如列表部分)

{{> accordion template=list data=about.services}} 

但我总是收到错误&#34;警告:找不到部分未定义使用&#34;

我也使用帮助器查找尝试了它,但是同样的结果也出现了错误。

一般来说,正确的方法还是有其他方法来解决这个问题?

我使用grunt-assemble来构建静态网站。这是handlbars版本## v4.0.5 - 2015年11月19日

格里

1 个答案:

答案 0 :(得分:-1)

好的,我找到了一个解决方案;)

基于此 assemble - Render a list of strings as Handlebars partial

//insert the accordion
{{> accordion partial="list" data=about.services}}

//accordion.hbs
<div class="c_accordion">
     ...
     {{dynamicPartial ../partial this.content}}
     ...
</div>

//helper dynamicPartial
module.exports.register = function (Handlebars, context)  { 
    Handlebars.registerHelper('dynamicPartial', function(name, data) {
        var partial = Handlebars.partials[name];
        var template = Handlebars.compile(partial);
        var output = template({"data": data});
        return new Handlebars.SafeString(output);
    })
};

//list.hbs
<ul>
    {{#each data}}
    <li>{{this}}</li>
    {{/each}}
</ul>