222

考虑以下简化数据：

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

还有一个把手模板：

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

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

4

4 回答 4

459

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

取消引用父范围../

通过添加../到属性名称之前，您可以引用父范围。

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

取消引用根范围@root

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

有关更多信息，请参阅有关 @data 变量的 Handlebars 文档。

于 2012-09-06T10:26:11.433 回答
69

新方法使用点表示法，斜杠表示法已弃用（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 助手还支持块参数，允许在块中的任何位置命名引用。

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

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

于 2016-04-19T17:29:37.413 回答
0

不幸的是 ../ 取消引用似乎不能通过部分工作。但是我们可以将属性添加到传递到部分的上下文中：

Name: {{parent.name}}

{{#each children}}
    {{> childpartial this parent=../parent}}
{{/each}}

子部分：

{{name}} is child of {{parent.name}}

更多： 车把 - 是否可以部分访问父上下文？

于 2020-10-16T08:07:20.180 回答
0

我们可以使用 {{../parent.propertyname}} 访问父级

于 2021-06-15T10:30:44.547 回答