Handlebars.js使用Json填充下拉列表/ subnav

Question

我正在尝试使用手柄和Json填充下拉列表。 我不了解如何构造Json以便填充子导航。

真正有用的方法是了解如何修复json结构，因为我不是把手的专家。 很高兴了解我的误会！

var data = {

  "title": "TITLE",
  "navItems": [{
      "mainnav": [{
          "title": "Home",
          "class": "subnav webfont-arrow_down",
          "id": " ",
          "href": "index.html"
        },
        {
          "title": "About us",
          "class": "",
          "id": " ",
          "href": "about-us.html",

          //SUB NAV STARTS HERE!!!!       
          "subnav": [{
              "title": "About us",
              "class": "",
              "href": "#"
            },
            {
              "title": "The School",
              "href": "about-us.html#TheSchool"
            },
            {
              "title": "Services",
              "href": "about-us.html#Services"
            },
            {
              "title": "The Curriculum",
              "href": "about-us.html#TheCurriculum"
            }

          ]
        },

        {
          "title": "Photo Gallery",
          "class": "",
          "id": " ",
          "href": "gallery.html"
        },
        {
          "title": "ofsted",
          "class": "",
          "id": " ",
          "href": "ofsted.html"
        },

        {
          "title": "contacts",
          "class": "",
          "id": " ",
          "href": "contacts.html"
        }
      ]



    }

  ]
};






var t = Handlebars.compile($('#t').html());
$('body').append(t(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script id="t" type="text/x-handlebars">
  <nav class="nav-main">

    {{#each global.navItems}}

    <div class="nav-subnav">
      <ul>
        {{#each mainnav}}
        <li class="nav-navItem">
          <a href="{{href}}" class="{{class}} nav-navLink">{{title}}</a> {{#if subnav}}
          <div class="subnav">
            <ul class="">
              {{#each subnav}}
              <li class="nav-navItem">
                <a href="{{href}}" class="{{class}}" class="nav-navLink">{{title}}</a> {{!-- {{#if subnav}} {{/if}} --}}
              </li>
              {{/each}}
            </ul>
          </div>
          {{/if}}

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




    </div>

    {{/each}}

  </nav>



</script>