把手:将变量传递给每个部分内部

时间:2016-07-27 19:28:20

标签: parameters handlebars.js partials

我使用块帮助器#each创建一个列表,但是我无法将变量传递给每个循环内部的部分。

{{#each a-z.letters}}
    {{this}} /*[1]*/
    <li class="list-inline__item">
        {{>button btn="btn-text" addClass='-large' link='letter/{{this}}' label='{{this}}'/*[2]*/}}
    </li>
{{/each}}

链接部分:

<a href="{{link}}" class="btn-text {{addClass}}">{{label}}</a>

输出结果为:

<ul class="list-inline">
    A /*[1]*/
    <li class="list-inline__item">
        <a href="letter/{{this}}/*[2]*/" class="btn-text -large">{{this}}/*[2]*/</a>
    </li>
    ....

[1]仅用于测试并且有效

[2]如果我想将它传递到局部内部,它不会渲染我的参数

更新

所以现在我的助手是用网址扩展我的href。

Handlebars.registerHelper('updateLink', function(options){
    var insertAt = "href=";
    var content = options.fn(this).trim();
    var pos = content.indexOf(insertAt) + insertAt.length+1;  // +1 for the quotation marks
    content  = content.slice(0, pos) + options.hash.url + content.slice(pos, content.length);
    return new Handlebars.SafeString(content ); 
});

链接部分:

{{#updateLink url="letters/"}}
    {{>button link=this label=this btn="btn-text" addClass='-large'}} 
{{/updateLink}}

1 个答案:

答案 0 :(得分:7)

当您已经在一组大括号内时,不能使用{{}}大括号语法来评估数据成员。但是,您可以简单地引用该成员,而不将其包装在引号中,并且将对其进行评估:

{{>button btn="btn-text" addClass='-large' link=this label=this}}

你会注意到我上面的例子中没有包含&#34;字母/&#34; link值的前缀。 Handlebars没有连接字符串的方法。为此,您可以选择以下选项之一:

  • 使用帮助者(您自己或其他人)。
  • 将前缀作为附加参数传递给您的部分。
  • 在部分模板中对前缀进行硬编码。
  • 在模板数据(a-z.letters)中包含连接字符串。