Configure child router to compose modules in parent router viewport html binding

Question

Objective: 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

<div id="parentRouterViewport" data-bind="router: { cacheViews: true }"><div>

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.

For brevity, I'm just including the mission critcal code sections for the routing.

shell.js

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();
        }
    };

shell.html

<div id="content" data-bind="router: { cacheViews: true }"></div>

index.js (child routing module)

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
    };
});

The only way this works is if I place a router viewport binding in my corresponding index.html 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.

Answer 1

In our team, we have created our own "child routers" using Knockout variables to show/hide the subViews based on tab button click. One caveat with this is that you will have to call your activate, deactivate, compositionComplete, etc from the main/parent view to get the subView to work. There are some other gotchas, but I figured I'd give you this as an option or others who see this question later.