在動態創建的句柄模板中添加一個css類

我有一個JSON對象，我正在循環動態創建x個ULs，然後LIs。我需要創建兩個{{#each}}來創建內容。但是，當我將CSS類添加到我的車把模板時，它不會像第二個{{#each}}那樣通過UL - 我該如何阻止？這裏是模板：在動態創建的句柄模板中添加一個css類

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

這裏就是我傳遞：

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

來源

2017-06-01 marcusps1

ID必須是唯一的。當你有多個ul元素時使用一個類。 – Gerard

這個ID是唯一的，因爲導航中可能有多個UL - 根據按下的按鈕來隱藏和顯示內容@Gerard – marcusps1

我想你正在尋找的是Handlebars path，讓你從{{#each sections}}內獲得的panel-menu__Css-class值。您需要了解當您處於{{#each sections}}範圍內時，您的this上下文是sections陣列當前迭代的元素。您必須提高級別以使其具有您嘗試訪問的panel-menu__Css-class屬性的父上下文：

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

來源

2017-06-02 05:17:47 76484

在動態創建的句柄模板中添加一個css類

回答

相關問題