2015-06-30 13 views
5

Gidonlara sahip bir menü oluşturmam gerekiyor ve menüdeki seçeneklerin bazıları kendi alt seçeneklerine sahipler ve ben de bununla 1 saat gibi mücadele ediyorum.handlebars.js alt menüsü oluşturma

şablon için My JSON nesnesi

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" 
} 
]; 

ve benim şablon bugüne kadar şuna benzer:

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

Ve bu alt menü ile seçenek için html:

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

If ifadesini düzgün kullanmayla ilgili sorun yaşıyorum ve şu anda gerçekten yardıma ihtiyacım var.

cevap

1

aşağıdaki kodu

<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

deneyin
İlgili konular