Access properties of the parent with a Handlebars ‘each’ loop

by

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.

More Related Contents:

  1. Logical operator in a handlebars.js {{#if}} conditional
  2. Handlebars/Mustache – Is there a built in way to loop through the properties of an object?
  3. Is there a built-in way to loop through the properties of an object?
  4. How do I access an access array item by index in handlebars?
  5. How to get index in Handlebars each helper?
  6. Access a variable outside the scope of a Handlebars.js each loop
  7. Passing variables through handlebars partial
  8. Need Handlebars.js to render object data instead of “[Object object]”
  9. Insert html in a handlebar template without escaping
  10. Handlebars: Access has been denied to resolve the property “from” because it is not an “own property” of its parent
  11. how express forming the img URL
  12. Using pre-compiled templates with Handlebars.js (jQuery Mobile environment)
  13. Handlebars Template rendering template as text
  14. Using Express Handlebars and Angular JS
  15. ember.js + handlebars: render vs outlet vs partial vs view vs control
  16. Rendering resolved promise value in Ember handlebars template
  17. How can I fix Highcharts error #13?
  18. How to read with JavaScript [closed]
  19. adding numbers in I variable in for loop javascript
  20. What is the !! (not not) operator in JavaScript?
  21. Remove property for all objects in array
  22. Why does “true” == true show false in JavaScript?
  23. JavaScript – How do I get the URL of script being called?
  24. What does $(selector)[0] mean in jQuery?
  25. Implementing jQuery’s “live” binder with native Javascript
  26. Kendo UI Grid multi level hierarchy (n-levels of hierarchy)
  27. Can we use the value of localStorage from other domains?
  28. Resource interpreted as Script but transferred with MIME type text/plain – for local file
  29. JavaScript: Check if CTRL button was pressed
  30. Lambda function syntax in JavaScript without curly braces

Leave a Comment