考虑以下简化的数据:
var viewData = {
itemSize: 20,
items: [
'Zimbabwe', 'dog', 'falafel'
]
};
和Handlebars模板:
{{#each items}}
<div style="font-size:{{itemSize}}px">{{this}}</div>
{{/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}}
你可以通过重复../来提升多个级别。例如，使用../../键上升两层。
有关更多信息，请参阅Handlebars关于路径的文档。
使用@root解除对根作用域的引用
通过将@root前置到属性路径，您可以从最上面的作用域向下导航(如caballerog的回答所示)。
有关更多信息，请参阅Handlebars关于@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 helper还支持块参数，允许命名 引用块中的任意位置。 {{#每个数组作为|值键|}} {{#每个孩子作为|childValue childKey|}} {{key}} - {{childKey}}。{{childValue}} {{/每个}} {{/每个}} 将创建一个键和值变量，孩子可以访问没有 需要深入的变量引用。在上面的例子中，{{key}} >等同于{{@../key}}，但在许多情况下可读性更好。
不幸的是. ./解引用似乎不能通过局部函数工作。但是我们可以向传递给分部的上下文添加属性:
Name: {{parent.name}}
{{#each children}}
{{> childpartial this parent=../parent}}
{{/each}}
childpartial:
{{name}} is child of {{parent.name}}
更多: 句柄-是否有可能在部分中访问父上下文?
假设您需要在每个块中使用if语句。例如，使用内置查找属性来查找根对象，根对象的键可以由外部每个循环动态给定。
以下工作在一个each循环和嵌套each循环以及:
{{#each anArray}}
{{#each (lookup ../anObject this)}}
{{#if (lookup @root name)}}
`Something to be shown if the value of 'name' here can be found as a key at the root object and, if its value is boolean, its value is 'true'.`
{{/if}}
{{/each}}
{{/each}}
anArray是根对象中给定的数组。
anObject是根对象中给定的对象。
anObject有一个name属性。
