title: How to handle nested menu in knockout viewmodel
body: <p>I am using knockoutjs in my project. I have a scenario where I have to create a nested menu in my viewmodel, which I did like this:</p>
  
  <pre><code>self.menu = [
      { 
           name: 'Services', 
           sub: [{ name: 'Service-A' }, { name: 'Service-B' }] 
      },
      // etc
  ];
  
  self.chosenMenu = ko.observable();
  
  self.goToMenu = function (main, sub) {
  
      var selectedMenu = {
          main: main,
          sub: sub
      };
  
      self.chosenMenu(selectedMenu);
  };
  </code></pre>
  
  <p>My View:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="nav navbar-nav menuitems col-md-8" data-bind="foreach: menu"&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
            &lt;span data-bind="text: name"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu" role="menu" data-bind="foreach: sub"&gt;
              &lt;li&gt;
                  &lt;a href="javascript:void(0);" data-bind="text: name, 
                     click: function() { $root.goToMenu($parent, $data); }"&gt;
                  &lt;/a&gt; 
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>However, I feel that this approach of creating nested menu is not good, because suppose if I want to go on any menu item programmatically then with his approach it is not possible?</p>
  
  <p>Can anybody please suggest me the good approach to handle this kind of scenario?</p>