Access properties of the parent with a Handlebars 'each' loop
The new method is using dot notation, the slash notation is deprecated (http://handlebarsjs.com/expressions.html).
So, the actual method to access to the parents elements are the following:
@root.grandfather.father.element
@root.father.element
In your specific example, you would use:
{{#each items}}
<div style="font-size:{{@root.viewData.itemSize}}px">{{this}}</div>
{{/each}}
Another method from the official documentation(http://handlebarsjs.com/builtin_helpers.html) is using alias
The each helper also supports block parameters, allowing for named references anywhere in the block.
{{#each array as |value key|}} {{#each child as |childValue childKey|}} {{key}} - {{childKey}}. {{childValue}} {{/each}} {{/each}}
Will create a key and value variable that children may access without the need for depthed variable references. In the example above, {{key}} > is identical to {{@../key}} but in many cases is more readable.
There are two valid ways to achieve this.
Dereference the parent scope with ../
By prepending ../
to the property name, you can reference the parent scope.
{{#each items}}
<div style="font-size:{{../itemSize}}px">{{this}}</div>
{{#if this.items.someKey}}
<div style="font-size:{{../../itemSize}}px">{{this}}</div>
{{/if}}
{{/each}}
You can go up multiple levels via repeating the ../
. For example, to go up two levels use ../../key
.
For more information, see the Handlebars documentation on paths.
Dereference the root scope with @root
By prepending @root
to the property path, you can navigate downwards from the topmost scope (as shown in caballerog's answer).
For more information, see the Handlebars documentation on @data variables.