Multiple levels of routing in Durandal

Question

I am looking at the Durandal samples trying to understand how routing works.

The shell.js specifies these routes:

{ route: ['', 'knockout-samples*details'], moduleId: 'ko/index', title: 'Details...', nav: true, hash: '#knockout-samples' },
{ route: 'view-composition',moduleId: 'viewComposition/index',  title: ...

under knockout-samples:

{ route: '', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro' },
{ route: 'helloWorld', moduleId: 'helloWorld/index', title: 'Hello World', type: intro', nav: true},

What I am trying to achieve is having another hierarchy under helloWorld. Something like this:

I tried this but no luck:

{ route: '', moduleId: 'helloWorld/index', title: 'Hello World', type: 'intro' },
{ route: 'helloWorld*details', moduleId: 'helloWorld/index', title: 'Hello World',           type: 'intro',      nav: true, hash:'#knockout-samples/helloWorld'}

However, this is not working.

Does Durandal routing not support this level of navigation?

Answer 1

When creating a 'grandchild' or 'great grandchild' or deeper child router, the trick is to reference the relative parent router, not the root router. To get a reference to the parent router, add the module that contains the parent router as a dependency to your 'grandchild' module. You can nest routers like this indefinitely. For example:

myModuleWithChildRouter.js

define(['plugins/router'],  //reference to durandal root router
    function(router) {         

           var _childRouter = router.createChildRouter();

          return { myNewChildRouter: _childRouter}
}

myModuleWithGrandchildRouter.js

define(['myModuleWithChildRouter'],  //reference to module with child router
    function(childRouterModule) {        

           var _grandChildRouter = childRouterModule.myNewChildRouter.createChildRouter();
          .....

}

Hope that helps!

Answer 2

To get more than one navigation level I'm doing this:

The only accesible router is the root router so to have acces to the child routers, everytime that I'm creating a child router, i store it on a module. Then, when i want to create another level, I get the child router from the module and call createChildRouter.

define([], function () {
    return {
        root: null,
        level1: null,
        level2: null
    };
});

define(['plugins/router', 'routers'], function (router, routerContainer) {
    var childRouter = router.createChildRouter()
        .makeRelative({
            moduleId: 'viewmodels/companyplussplat',
            //fromParent: true
            route: 'company'
        }).map([
            { route: 'order/:orderID', moduleId: 'orderdetail', title: 'Order', nav: false },
            { route: 'order/:orderID*details', moduleId: 'orderdetailplussplat', title: 'Order plus splat', nav: false }
        ]).buildNavigationModel();

    routerContainer.level1 = childRouter;

    return {
        activate: function () {
            console.log("Activating company plus splat");
        },
        deactivate: function () {
            console.log("Deactivating company plus splat");
        },
        router: childRouter
    };
});

define(['plugins/router', 'routers'], function (router, routerContainer) {
    //debugger;
    var childRouter = routerContainer.level1.createChildRouter()
        .makeRelative({
            moduleId: 'orderteailplussplat',
            //fromParent: true
            route: 'company/order/:orderID'
        }).map([
            { route: 'orderline/:orderlineID', moduleId: 'orderlinedetail', title: 'Order line detail', nav: false },
        ]).buildNavigationModel();

    routerContainer.level2 = childRouter;

    return {
        activate: function (orderID) {
            console.log('Activating order detail for: '+ orderID +' plus splat');
        },
        deactivate: function () {
            console.log('Deactivating order detail plus splat');
        },
        router: childRouter
    };
});

I hope this will help you.