Geek Answers Handbook

Creating the submenu handlebars.js

I need to create a menu with rudders, and some of the parameters in the menu have their own sub-parameters, and I have been struggling with this for 1 hour already.

My JSON object for the template

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

and my template looks like this:

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

And this is the html for the option with the submenu:

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

I'm having trouble using the if-statement correctly, and I really need some help right now.

+5
source share
1 answer

Try using the following code

 <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

+1
source

More articles:


All Articles