Creating handlebars.js sub-menu

Question

I need to create a menu with handlebars, and some of the options in the menu have their own sub-options and I am struggling with this for like 1 hour already.

My JSON object for the template is

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 so far:

<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 sub-menu:

<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 properly and I Really need some help right now.

Answer 1

Try 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