Adding a css class in a dynamically created handlebars template

Question

I have a JSON object that I am looping through to dynamically create x amount of ULs then LIs. I need to create two {{#each}} to create the content. However when I add a CSS class to my handlebars template it does not come through onto the UL as it does in the second {{#each}} - how do I stop this? Here is the template:

<div class="{{panel-container__Css-class}} {{panel-menu__Css-class}}" data-component="panel">
  {{#each sections}}
  <ul id="{{id}}" class="{{panel-menu__Css-class}}">
    {{#each list}}
    <li><a href="{{url}}">{{title}}</a></li>
    {{/each}}
  </ul>
  {{/each}}
</div>

Here is what i am passing in:

    <nav data-component="navigation">
        {{> nav-dropdown menu-button__Css-class="menu-button" menu-button__Css-class-nav="panel"  target-id="panel-nav"  }}
        {{> nav-dropdown menu-button__Css-class="region-button" menu-button__Css-class-nav="region" target-id="panel-region" menu-button__copy=panel.copy}}
        {{!--var links = [{"title": "Test","url": "/"}];--}}
        {{> panel panel-menu__Css-class="navigation__menu-styles" panel-container__Css-class="navigation__menu-container" sections=navigation.sections links=navigation.sections.list  }}
    </nav>

An ID must be unique. Use a class when you have multiple ul elements. — Gerard
– Gerard, Commented Jun 1, 2017 at 9:57
The id is unique because there may be multiple UL's within the nav - which hide and show content depending on what button was pressed @Gerard — marcusps1
– marcusps1, Commented Jun 1, 2017 at 9:58

76484 · Accepted Answer · 2017-06-02 05:17:47Z

1

I think what you are looking for is the Handlebars path that will allow you to obtain the value of panel-menu__Css-class from within {{#each sections}}. You need to understand that when you are within {{#each sections}}, your this context is the currently iterated element of the sections array. You must step up a level to the parent context which has the panel-menu__Css-class property you are trying to access:

<ul id="{{id}}" class="{{../panel-menu__Css-class}}">

answered Jun 2, 2017 at 5:17

76484

9,0013 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding a css class in a dynamically created handlebars template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related