Handlebars expression outside of #each helper

Question

How can I add a dynamic class name in an #each block to my Handlebars template, where the class name isn't part of the block scope?

<div class="{{className}}>...</div>

{{#each items}}
    <div class="{{className}}">
        ...
    </div>
{{/each}}

The first <div> will see the class name, whereas the second one in the #each block doesn't, because it is now looking for a className in items.
Is it possible to see outside of the items scope in the #each block?

Try to follow this: http://stackoverflow.com/questions/12297959/access-properties-of-the-parent-with-a-handlebars-each-loop/12297980#12297980 — Naitik, May 13 '15 at 13:18

score 1 · Answer 1 · answered Apr 01 '15 at 13:57

You need to go back one scope (or possibly more), using ../ to access a global variable. In your case if your pass i className as one attribute and ìtems`as another, your code should look like this:

{{#each items}}
   <div class="{{../className}}">
    ...
   </div>
{{/each}}

score 0 · Answer 2 · answered Dec 01 '18 at 14:32

0

@root.classname will help on any depth of scope.

answered Dec 01 '18 at 14:32

Alex.Default

236
3
16

Handlebars expression outside of #each helper

2 Answers2