title: Durandal 2.0 - Child routers intended for nested menus?
body: <p>I've building an app, and wanting to show a 2-tier menu, with both tiers always available. Durandal 2.0 <a href="http://durandaljs.com/documentation/Using-The-Router/" rel="nofollow noreferrer">introduced their new router</a>, which supports 'child routers', which allow for easier deeplinking.</p>
  
  <p><strong>My question</strong> - Can I have my 'child' navigation routes permanently loaded (and a sub menu rendered when the parent is not active), or is the 'child router' design intended to lazy-load them to evaluate them once a deeplink is to be evaluated?</p>
  
  <p><strong>The Durandal examples show</strong> main navigation register a splat route, <em>then</em> when that view model is loaded/activated, the child router is registered.</p>
  
  <p>E.g.: In the example provided with Durandal 2.0, the mian nev is registered in <code>shell.js</code></p>
  
  <pre><code>router.map([
                  { route: ['', 'home'], moduleId: 'hello/index', title: 'Validation test', nav: true },
                  { route: 'knockout-samples*details',    moduleId: 'ko/index',               title: 'Knockout Samples',  nav: true, hash: '#knockout-samples' }
              ]).buildNavigationModel()
                .activate();
  </code></pre>
  
  <p>And the <code>ko/index.js</code> view model then registers the children (on <code>activate()</code>)</p>
  
  <pre><code>var childRouter = router.createChildRouter()
          .makeRelative({
              moduleId:'ko',
              fromParent:true
          }).map([
              { route: '',                moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro' },
              { route: 'helloWorld',      moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro',      nav: true},
              { route: 'clickCounter',    moduleId: 'clickCounter/index',     title: 'Click Counter',         type: 'intro',      nav: true}
          ]).buildNavigationModel();
  </code></pre>
  
  <p><strong>Whereas I'm looking to</strong> define my routes in one place, e.g.:</p>
  
  <pre><code> var routes = [
     { route: ['', 'home'], 
          moduleId: 'hello/index', 
          title: 'Validation test', 
          nav: true },
     { route: 'knockout-samples*details',    
          moduleId: 'ko/index',
          moduleRootId: 'ko', // Custom property to make child routes easier              
          title: 'Knockout Samples',  
          nav: true, 
          hash: '#knockout-samples',
          childRoutes: [
              { route: '',                moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro' },
              { route: 'helloWorld',      moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro',      nav: true},
              { route: 'clickCounter',    moduleId: 'clickCounter/index',     title: 'Click Counter',         type: 'intro',      nav: true}
          ]}
     ])
  </code></pre>
  
  <p>And the part I'm struggling with is registering the child routes, and have them evaulate correctly when navigating to them. (Rendering the menu would come later...)</p>
  
  <pre><code>// Load routes              router.map(routes.navRoutes).buildNavigationModel().mapUnknownRoutes(function(instruction)
  {
      logger.logError('No Route Found', instruction.fragment, 'main', true);
  });
  
  // Try load child routes...
  $.each(routes.navRoutes, function(index, parentRoute) {
       if (!parentRoute.childRoutes) {
                  return;
              }
  
              var childRouter = router.createChildRouter()
                  .makeRelative({
                      moduleId: parentRoute.moduleRootId,
                      fromParent: true // also tried false + non-splat routes...
                  }).map(parentRoute.childRoutes).buildNavigationModel();
          });
  </code></pre>
  
  <p>I've encountered various errors in getting this nav to render. Mostly internal router.js errors when trying to calculate the hash (either from a non-activated parent, or the child) - so all hashes have been defined. </p>
  
  <p>Once I've got it to map the navigation, the child routes don't seem to be accessible - they just load the main splat page without error. </p>
  
  <p>So I'm wondering if I'm going about this the right way at all? (Registering all child routes up front, with the goal of being about to render a 2-tier menu). </p>
  
  <p>I'm thinking the fallback is using something like the <a href="https://stackoverflow.com/questions/15801972/durandal-subrouting-hottowel">Durandal 1.2 answer about subrouting</a>, using a combination of flat routing registration, custom 'isSameItem' function &amp; computed observables to render the 2-tier navigation.</p>