javascript - 使用 Handlebars 'each' 循环访问父级的属性

Question

考虑以下简化数据:

var viewData = {
    itemSize: 20,
    items: [
        'Zimbabwe', 'dog', 'falafel'
    ]
};

还有一个 Handlebars 模板:

{{#each items}}
    <div style="font-size:{{itemSize}}px">{{this}}</div>
{{/each}}

这行不通，因为在 each 循环中，父作用域不可访问——至少我尝试过的任何方式都不可访问。我希望有办法做到这一点!

Answer 1

有两种有效的方法可以实现这一点。

使用 ../

取消对父作用域的引用

通过在属性名称前添加 ../，您可以引用父作用域。

{{#each items}}
    <div style="font-size:{{../itemSize}}px">{{this}}</div>
    {{#if this.items.someKey}}
       <div style="font-size:{{../../itemSize}}px">{{this}}</div>  
    {{/if}}
{{/each}}

您可以通过重复 ../ 来提升多个级别。例如，要上两层，请使用 ../../key.

有关详细信息，请参阅 Handlebars documentation on paths .

使用 @root

取消对根范围的引用

通过在属性路径前添加 @root，您可以从最顶层范围向下导航(如 caballerog's answer 所示)。

有关详细信息，请参阅 Handlebars documentation on @data variables .