使用Handlebars.js的下拉菜單導航菜單

Question

Handlebars.js似乎是一個很好的解決方案，但我有一個問題，試圖將示例模型添加到某些標記。

我想用下拉菜單創建頂級導航，並且遇到嵌套each幫助程序的問題。

JSON文件：

{ 
    "modifier": "", 
    "decorator": "", 
    "title": "Main Navigation", 
    "main-nav-items": [ 
     { 
      "nav-id": 0, 
      "nav-link": "/en", 
      "nav-text": "Home", 
      "active": "class=\"active\"" 
     }, 
     { 
      "nav-id": 1, 
      "nav-link": "/en/about-launch-sitecore", 
      "nav-text": "About Launch Sitecore", 
      "dropdown": "class=\"dropdown\"", 
      "dropdown-toggle": "class=\"dropdown-toggle\" data-toggle=\"dropdown\"", 
      "dropdown-caret": "<b class=\"caret\"></b>" 
     }, 
     { 
      "nav-id": 2, 
      "nav-link": "/en/team", 
      "nav-text": "Team" 
     }, 
     { 
      "nav-id": 3, 
      "nav-link": "/en/glossary", 
      "nav-text": "Glossary" 
     }, 
     { 
      "nav-id": 4, 
      "nav-link": "/en/contact-us", 
      "nav-text": "Contact Us" 
     } 
    ], 
    "sub-nav-items": [ 
     { 
      "nav-id": 0, 
      "nav-link": "/en/about-launch-sitecore/getting-started", 
      "nav-text": "Getting Started" 
     }, 
     { 
      "nav-id": 1, 
      "nav-link": "/en/about-launch-sitecore/our-strategy", 
      "nav-text": "Our Strategy" 
     }, 
     { 
      "nav-id": 2, 
      "nav-link": "/en/about-launch-sitecore/building-the-site", 
      "nav-text": "Building the Site" 
     }, 
     { 
      "nav-id": 3, 
      "nav-link": "/en/about-launch-sitecore/optimizing-the-experience", 
      "nav-text": "Optimizing the Experience" 
     }, 
     { 
      "nav-id": 4, 
      "nav-link": "/en/about-launch-sitecore/sitecore-8", 
      "nav-text": "Sitecore 8" 
     } 
    ] 
} 

HTML代碼（使用引導2.3.2）：

<div class="navbar"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <div class="nav-collapse collapse"> 
     <ul class="nav"> 
      {{#each main-nav-items}} 
      <li id="ctl05_rptDropDownMenu_MenuLi_{{nav-id}}"{{#if active}} {{{active}}}{{/if}}{{#if dropdown}} {{{dropdown}}}{{/if}}> 
       <a id="ctl05_rptDropDownMenu_MenuLink_{{nav-id}}"{{#if dropdown-toggle}} {{{dropdown-toggle}}}{{/if}} href="{{nav-link}}">{{nav-text}}{{#if dropdown-caret}} {{{dropdown-caret}}}{{/if}}</a> 
       {{#if dropdown}} 
      <ul class="dropdown-menu"> 
       {{#sub-nav-items}} 
        <li id="ctl05_rptDropDownMenu_ctl00_1_MenuLi_{{nav-id}}"> 
         <a id="ctl05_rptDropDownMenu_ctl00_1_MenuLink_{{nav-id}}" href="{{nav-link}}">{{nav-text}}</a> 
        </li> 
       {{/sub-nav-items}} 
      </ul> 
       {{/if}} 
      </li> 
      {{/each}} 
     </ul> 
     </div>  
    </div> 
    </div> 
</div> 

我不能讓sub-nav-items呈現，即使與下拉列表中的資產淨值有正確的條件。

客戶端模板對我來說還是比較新的，所以在解決方案中也歡迎其他任何格式化技巧和最佳實踐。

Answer 1

答案似乎是on the homepage under Paths但它並不明顯。我需要做的是，以使其搜索上sub-nav items添加查找路徑sub-nav-items出當前數組：

{{#each ../sub-nav-items}} 
    <li id="ctl05_rptDropDownMenu_ctl00_1_MenuLi_{{nav-id}}"> 
     <a id="ctl05_rptDropDownMenu_ctl00_1_MenuLink_{{nav-id}}" href="{{nav-link}}">{{nav-text}}</a> 
    </li> 
{{/sub-nav-items}} 

之所以這樣做是因爲each看起來僅搜索當前陣列中的表達式項目。它發現下拉無序列表元素很好，但無法找到sub-nav-items，因爲它在迭代數組項中不存在。 sub-nav-items位於迭代項上方的圖層中。把手認爲子導航項存在數組項中的一個節點。

作爲Handlebars和更高級別的編程的noob，這對我來說並不明顯，所以我不明白爲什麼它不會找到sub-nav-items。