通过“每个”把手进入父级的属性

考虑以下简化数据：

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

还有一个车把模板：

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

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

有两种有效的方法可以实现此目的。

取消引用父范围 ../

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

{{#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。

有关更多信息，请参阅路径上的把手文档。

取消引用根范围 @root

通过添加@root到属性路径，您可以从最高范围向下导航（如caballerog的答案所示）。

有关更多信息，请参见有关@data变量的把手文档。

新方法使用点表示法，不建议使用斜杠（http://handlebarsjs.com/expressions.html）。

因此，访问父元素的实际方法如下：

@root.grandfather.father.element
@root.father.element

在您的特定示例中，您将使用：

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

官方文档（http://handlebarsjs.com/builtin_helpers.html）中的另一种方法是使用别名

每个帮助程序还支持块参数，从而允许在块中的任何位置进行命名引用。

{{#each array as |value key|}}  
 {{#each child as |childValue childKey|}}
     {{key}} - {{childKey}}. {{childValue}}   
 {{/each}} 
{{/each}} 

将创建一个子项可以访问的键和值变量，而无需深度变量引用。在上面的示例中，{{key}}>与{{@ .. / key}}相同，但在许多情况下更具可读性。