title: Navigation menu with dropdown using Handlebars.js
body: <p>Handlebars.js seems to be a good solution but I'm having an issue trying to add a sample model to some markup.</p>
  
  <p>I am trying to create a top level navigation with a dropdown and am having issues with a nested <code>each</code> helper.</p>
  
  <p>JSON file:</p>
  
  <pre><code>{
      "modifier": "",
      "decorator": "",
      "title": "Main Navigation",
      "main-nav-items": [
          {
              "nav-id": 0,
              "nav-link": "/en",
              "nav-text": "Home",
              "active": "class=\"active\""
          },
          {
              "nav-id": 1,
              "nav-link": "/en/about-launch-sitecore",
              "nav-text": "About Launch Sitecore",
              "dropdown": "class=\"dropdown\"",
              "dropdown-toggle": "class=\"dropdown-toggle\" data-toggle=\"dropdown\"",
              "dropdown-caret": "&lt;b class=\"caret\"&gt;&lt;/b&gt;"
          },
          {
              "nav-id": 2,
              "nav-link": "/en/team",
              "nav-text": "Team"
          },
          {
              "nav-id": 3,
              "nav-link": "/en/glossary",
              "nav-text": "Glossary"
          },
          {
              "nav-id": 4,
              "nav-link": "/en/contact-us",
              "nav-text": "Contact Us"
          }
      ],
      "sub-nav-items": [
          {
              "nav-id": 0,
              "nav-link": "/en/about-launch-sitecore/getting-started",
              "nav-text": "Getting Started"
          },
          {
              "nav-id": 1,
              "nav-link": "/en/about-launch-sitecore/our-strategy",
              "nav-text": "Our Strategy"
          },
          {
              "nav-id": 2,
              "nav-link": "/en/about-launch-sitecore/building-the-site",
              "nav-text": "Building the Site"
          },
          {
              "nav-id": 3,
              "nav-link": "/en/about-launch-sitecore/optimizing-the-experience",
              "nav-text": "Optimizing the Experience"
          },
          {
              "nav-id": 4,
              "nav-link": "/en/about-launch-sitecore/sitecore-8",
              "nav-text": "Sitecore 8"
          }
      ]
  }
  </code></pre>
  
  <p>HTML code (using Bootstrap 2.3.2):</p>
  
  <pre><code>&lt;div class="navbar"&gt;
    &lt;div class="navbar-inner"&gt;
      &lt;div class="container"&gt;
        &lt;div class="nav-collapse collapse"&gt;
          &lt;ul class="nav"&gt;
              {{#each main-nav-items}}
              &lt;li id="ctl05_rptDropDownMenu_MenuLi_{{nav-id}}"{{#if active}} {{{active}}}{{/if}}{{#if dropdown}} {{{dropdown}}}{{/if}}&gt;
                  &lt;a id="ctl05_rptDropDownMenu_MenuLink_{{nav-id}}"{{#if dropdown-toggle}} {{{dropdown-toggle}}}{{/if}} href="{{nav-link}}"&gt;{{nav-text}}{{#if dropdown-caret}} {{{dropdown-caret}}}{{/if}}&lt;/a&gt;
                  {{#if dropdown}}
              &lt;ul class="dropdown-menu"&gt;
                {{#sub-nav-items}}
                      &lt;li id="ctl05_rptDropDownMenu_ctl00_1_MenuLi_{{nav-id}}"&gt;
                          &lt;a id="ctl05_rptDropDownMenu_ctl00_1_MenuLink_{{nav-id}}" href="{{nav-link}}"&gt;{{nav-text}}&lt;/a&gt;
                      &lt;/li&gt;
                {{/sub-nav-items}}
              &lt;/ul&gt;
                  {{/if}}
              &lt;/li&gt;
              {{/each}}
          &lt;/ul&gt;
        &lt;/div&gt;    
      &lt;/div&gt;  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I cannot get <code>sub-nav-items</code> to render even though the nav with the dropdown has the correct conditional.</p>
  
  <p>Client-side templating is still relatively new to me so any other formatting tips and best practices are also welcome in the solution.</p>