title: Configure child router to compose modules in parent router viewport html binding
body: <p><strong>Objective:</strong>
  I want the segregation and encapsulation benefits of utilizing child routers to organize routes by significant feature areas of the app. However, I want to have those routes handled and composed by the parent router viewport binding. i.e </p>
  
  <p><code>&lt;div id="parentRouterViewport" data-bind="router: { cacheViews: true }"&gt;&lt;div&gt;</code></p>
  
  <p>So far, everything I have tried including making calls back to the parent router to delegate the route (as an experiment) have failed. Making me wonder if this is even possible.</p>
  
  <p><em>For brevity, I'm just including the mission critcal code sections for the routing.</em></p>
  
  <p><strong>shell.js</strong></p>
  
  <pre><code>return {
          router: router,
          activate: function() {
              return router.map([
                      { route: 'App*splat', moduleId: 'app/home/viewmodels/index', title: 'Home', nav: true }
                  ]).buildNavigationModel()
                  .mapUnknownRoutes('app/home/viewmodels/error')
                  .activate();
          }
      };
  </code></pre>
  
  <p><strong>shell.html</strong></p>
  
  <pre><code>&lt;div id="content" data-bind="router: { cacheViews: true }"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>index.js (child routing module)</strong></p>
  
  <pre><code>var childRouter = router.createChildRouter()
          .makeRelative({
              moduleId: 'app/home/viewmodels',
              fromParent: true
          }).map([
              { route: 'EligibiltySearch',    moduleId: 'eligibilitySearch',  title: 'Eligibility Search',    nav: true }
          ]).buildNavigationModel();
  
      return {
          router: childRouter
      };
  });
  </code></pre>
  
  <p>The only way this works is if I place a router viewport binding in my corresponding <em>index.html</em> view. However, this is not what I am after based on the css layout and page look and feel I am trying to design. Everything should be represented as a panel and swapped out for a different panel whenever a route is hit. Currently, this approach will have two panels constantly open. Take a look at the photo below for better context on what I mean.</p>
  
  <p><img src="https://i.stack.imgur.com/zt3EP.jpg" alt="Photo of the CSS layout issue described above"></p>