Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

Photo of the CSS layout issue described above

like image 836
Matthew Cox Avatar asked Jun 17 '15 22:06

Matthew Cox


1 Answers

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.

like image 70
t1nr2y Avatar answered Nov 02 '22 22:11

t1nr2y