動的に作成されたハンドルバーテンプレートにcssクラスを追加する

Question

私はループしているxmlのULとその後のLIを動的に作成するためにループしているJSONオブジェクトを持っています。コンテンツを作成するには2つの{{#each}}を作成する必要があります。しかし、CSSクラスを私のハンドルバーのテンプレートに追加すると、2番目と同じようにUL上に来ることはありません{{#each}} - どうやって止めますか？ここではテンプレートは次のとおりです。私はあなたが探しているものだと思い

<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> 

Answer 1

あなたは{{#each sections}}内からpanel-menu__Css-classの値を得ることができるようになりますHandlebars pathされています。ここでは

<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> 

は私が渡していますものです。 {{#each sections}}の範囲内にあるときは、thisコンテキストがsections配列の現在反復された要素であることを理解する必要があります。アクセスしようとしている属性がpanel-menu__Css-classの親コンテキストにステップアップする必要があります。

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