Question

While inside a Handlebars each, I want to access a property and apply the value to those items. In this example, I set up a paragraph tag with each of the options array values. I’d like to add the same class to those same paragraphs as part of the process.

JSON:

"newFaucetCrumbsDiv": {
"options": ["Intro","Video Gallery","Help Me Choose", "Recommendations"],
"recommendationsCount": "0",
"class":"newFaucetCrumbText"
    }

TEMPLATE:

<div id="newFaucetCrumbsDiv">
    {{#each newFaucetCrumbsDiv.options}}
        <p class="{{newFaucetCrumbsDiv.class}}">{{this}}</p>
    {{/each}}
</div>

My p tags appear properly but not the class. In the JSON I don’t want to have to call out the class for each of the items in the array – too verbose and they are the same. Is there Handlebars syntax that allows for this? If not, what helper might help? Thank you, I’m just getting off the ground with Handlebars~!

Answer 1

You have to use ../ to back out into the parent context:

<div id="newFaucetCrumbsDiv">
    {{#each newFaucetCrumbsDiv.options}}
        <p class="{{../newFaucetCrumbsDiv.class}}">{{this}}</p>
    {{/each}}
</div>

---

Here’s a quote from the docs:

Nested handlebars paths can also include ../ segments, which evaluate their paths against a parent context… The ../ path segment references the parent template scope, not one level up in the context…