Access Properties of the Parent with a Handlebars 'Each' Loop

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

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.

Access parent property in handlebars each where each is nested property

There is a little confusion here as to what the parent context is when within the #each.

As a tip, a good way to discover the parent context is to use Handlebars' built-in log helper.

Within our #each we can add {{log ..}} and Handlebars will print to the console the value of our parent.

In this case we get:

{
  fruit: {
    currency: 'GBP',
    items: Array(2) [...]
  }
}

This tells us that our parent is the root context and not the fruit object. This makes sense because we never "step-into" the context of fruit - for example, by using {{#with fruit}}{{#each items}} - but instead iterate fruit.items directly from the root.

This means we need only change our ../currency to ../fruit.currency. An alternative would be to use Handlebars' @root data variable to jump to our root context directly: @root/fruit.currency.

A second alternative is to use the #with helper as mentioned above. This creates a fruit context, allowing us to leave the #each part of the template as you had it in your post:

{{#with fruit}}
  {{#each items}}
     <p>{{name}} - {{quantity}} {{../currency}}</p>
  {{/each}}
{{/with}}

I have created a fiddle for your reference.

Handlebars - #if based on parent property within #each

There is nothing wrong in your code snippet, other than another loop over data.

{{#each this}}
  {{#each things}}
    <p>{{blah}}</p>
    {{#if ../someFoo}}<p>Yay!</p>{{/if}}
  {{/each}}
{{/each}}

You access variables 1 level up of current each block using ../

Handlebars.js: How to access parent index in nested each?

There is a syntax error in the example. The correct syntax is {{@../index}}.

We are looking at ways that we can support custom naming of these parameters in future versions of the language so this is easier to deal with.
https://github.com/wycats/handlebars.js/issues/907

Access a variable outside the scope of a Handlebars.js each loop

Try

<option value="{{id}}">{{title}} {{../externalValue}}</option>

The ../ path segment references the parent template scope that should be what you want.

Handlebars js - cannot access parent object properties from loop / partial

Here is the solution:

{{#each data}}
  ....
  {{#with ../this}}
    {{> yourPartial}}
  {{/with}}
  ....
{{/each}}

And in your partial, simply:

{{title}}

Edit.
You should implement your own helper, like:

Handlebars.registerHelper("withCurrentItem", function(context, options){
    var contextWithCurrentItem = context;
    contextWithCurrentItem.currentItem = options.hash.currentItem;
    return options.fn(contextWithCurrentItem);
});

And use it like:

{{#withCurrentItem ../this currentItem=this}}
  {{> yourPartial}}
{{/withCurrentItem}}

How to access data inside nested loop in Handlebars?

I see a few problems.

First, you are trying to step-up a context-level from within your #each using ./row. However, the correct syntax for this is two dots, ../row.

Secondly, when you step-up a context-level, by using ../row you are trying to access a row property on the parent context. But the parent does not have a row property because the parent is the row object. So the correct reference would be .. instead of ../row.

Third, Handlebars does not support dynamic key evaluation with square brackets. You need to use the lookup helper to do this evaluation, {{lookup .. @key}}.

I have created a fiddle for your reference.

---

Related Topics