Navigationsmenü mit Dropdown mit Lenker.js

Question

Lenker.js scheint eine gute Lösung zu sein, aber ich habe ein Problem, ein Beispielmodell zu einem Markup hinzuzufügen.

Ich versuche, eine Top-Level-Navigation mit einem Dropdown erstellen und habe Probleme mit einem verschachtelten each Helfer.

JSON-Datei:

{ 
    "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-Code (Bootstrap 2.3.2 verwenden):

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

kann ich nicht sub-nav-items bekommen zu machen, obwohl das nav mit dem Drop-Down die richtigen bedingten hat.

Client-seitiges Templating ist für mich noch relativ neu, daher sind auch andere Formatierungstipps und Best Practices in der Lösung willkommen.

Answer 1

Die Antwort scheint on the homepage under Paths zu sein, aber es war nicht offensichtlich. Was ich tun muß, ist ein Lookup-Pfad auf sub-nav items hinzufügen, so dass es für sub-nav-items aus dem aktuellen Array sucht:

{{#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}} 

Der Grund, dies zu tun ist, weil die each aussehen nur für Ausdrücke innerhalb des aktuellen Array sucht Artikel. Es findet das Dropdown-Listenelement ungeordnet, aber es kann sub-nav-items nicht gefunden werden, da es nicht innerhalb des iterierten Array-Elements existiert. sub-nav-items existiert in einer Ebene über dem iterierten Element. Lenker denkt, dass Sub-Nav-Elemente als ein Knoten innerhalb des Array-Elements existieren.

Als ein Noob zu Lenker und höhere Programmierung, war dies nicht offensichtlich für mich, also habe ich nicht verstanden, warum es sub-nav-items nicht lokalisieren würde.