Javascript 创建handlebar.js子菜单

Javascript 创建handlebar.js子菜单,javascript,jquery,handlebars.js,Javascript,Jquery,Handlebars.js,我需要创建一个带有把手的菜单,菜单中的一些选项有自己的子选项,我已经为此挣扎了1个小时 模板的JSON对象是 var menuJSON = [ { name : "Schedule", url: "index.html?lang=en", icon: "fa fa-calendar-o", state:"inactive" }, { name : "Clients", url: '#', icon: "fa fa-users",

我需要创建一个带有把手的菜单,菜单中的一些选项有自己的子选项,我已经为此挣扎了1个小时

模板的JSON对象是

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"
}
];
到目前为止,我的模板如下所示:

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

    {{{#每个这个}
  • {{/每个}}
这是带有子菜单的选项的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>
    • {{documents.sub2}}尝试以下代码

      <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>
      
        {{{#每个这个}
      • {{{#if subs}}
          {{{#每个subs}}
        • {{/每个}}
        {{/if}
      • {{/每个}}