Creazione del sottomenu handlebars.js

Question

Ho bisogno di creare un menu con i manubri, e alcune delle opzioni nel menu hanno le loro opzioni secondarie e sto lottando con questo già per 1 ora.

mio oggetto JSON per il modello è

var menuJSON = [ 
{ 
    name : "Schedule", 
    url: "index.html?lang=en", 
    icon: "fa fa-calendar-o",  
    state:"inactive" 
}, 
{ 
    name : "Clients", 
    url: '#', 
    icon: "fa fa-users", 
    subs : ['Yours', 'Company'], 
    state:"inactive", subsTargetID: "collapse-menuC" 
} 
]; 

e il mio modello assomiglia a questo finora:

<div class="sidebarMenuWrapper" id="menuOpts"> 
    <script id="optsMenuTemp" type="x-handlebars-template"> 
     <ul class="list-unstyled"> 
     {{#each this}} 
       <li class="{{state}}"> 
        <a href="{{url}}"><i class="{{icon}}"></i> 
         <span>{{name}}</span> 
        </a> 
       </li> 
     {{/each}} 
     </ul> 
    </script> 
</div> 

E questo è il codice html per l'opzione con il sottomenu:

<li class="hasSubmenu"> 
    <a href="#" data-toggle="collapse" data-target="#collapse-menuD"><i class="fa fa-folder-open-o"></i> 
     <span>{{documents.name}}</span> 
    </a> 
    <ul class="collapse" id="collapse-menuD"> 
     <li> 
      <a href="index.html?lang=en&amp;top_style=inverse"> 
      <i class= "fa fa-street-view"></i> 
      <span>{{documents.sub1}}</span> 
      </a> 
     </li> 
     <li> 
      <a href="index.html?lang=en&amp;top_style=default"><i class="fa fa-clipboard"></i> 
       <span>{{documents.sub2}}</span 
      </a> 
     </li> 
    </ul> 
</li> 

Ho problemi nell'usare correttamente l'if-statement e ho davvero bisogno di aiuto in questo momento.

Answer 1

provare il seguente codice

<ul class="list-unstyled"> 
{{#each this}} 
     <li class="{{state}}"><a href="{{url}}"><i class="{{icon}}"></i><span>{{name}}</span></a> 
     {{#if subs}} 
      <ul class="collapse" id="collapse-menuD"> 
        {{#each subs}} 
          <li><a href="index.html?lang=en&amp;top_style=inverse"><i class= "fa fa-street-view"></i><span>{{this}}</span></a> 
         </li> 

{{/each}} 
        </ul> 
     {{/if}} 
     </li> 
{{/each}} 
</ul> 

http://handlebarsjs.com/builtin_helpers.html