Search code examples
javascripthandlebars.js

Access properties of the parent with a Handlebars 'each' loop

Consider the following simplified data:

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

And a Handlebars template:

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

This won't work because within the each loop, the parent scope is not accessible -- at least not in any way that I've tried. I'm hoping that there's a way of doing this though!

Solution

  • 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.