How to define a standard child route in the durandal sample application

Question

When I enter in the url bar:

http://localhost:28905/#knockout-samples/

there is on the left side the hello world route. When I click on it the url bar changes to this: http://localhost:28905/#knockout-samples/helloWorld

1.) How can I load the http://localhost:28905/#knockout-samples/ route initially with the child route immediately so when I load the knockout samples I see

this: http://localhost:28905/#knockout-samples/helloWorld and not 
this: http://localhost:28905/#knockout-samples/

from the durandaljs samples:

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},
            { route: 'simpleList',      moduleId: 'simpleList/index',       title: 'Simple List',           type: 'intro',      nav: true },
            { route: 'betterList',      moduleId: 'betterList/index',       title: 'Better List',           type: 'intro',      nav: true},
            { route: 'controlTypes',    moduleId: 'controlTypes/index',     title: 'Control Types',         type: 'intro',      nav: true },
            { route: 'collections',     moduleId: 'collections/index',      title: 'Collection',            type: 'intro' ,     nav: true },
            { route: 'pagedGrid',       moduleId: 'pagedGrid/index',        title: 'Paged Grid',            type: 'intro',      nav: true },
            { route: 'animatedTrans',   moduleId: 'animatedTrans/index',    title: 'Animated Transition',   type: 'intro',      nav: true },
            { route: 'contactsEditor',  moduleId: 'contactsEditor/index',   title: 'Contacts Editor',       type: 'detailed',   nav: true },
            { route: 'gridEditor',      moduleId: 'gridEditor/index',       title: 'Grid Editor',           type: 'detailed',   nav: true },
            { route: 'shoppingCart',    moduleId: 'shoppingCart/index',     title: 'Shopping Cart',         type: 'detailed',   nav: true },
            { route: 'twitterClient',   moduleId: 'twitterClient/index',    title: 'Twitter Client',        type: 'detailed',   nav: true}
        ]).buildNavigationModel();

score 1 · Accepted Answer · answered Oct 09 '13 at 21:14

I've used guardRoute to accomplish this for the top level e.g. http://dfiddle.github.io/dFiddle-2.0.

// Redirecting from / to first route
    router.guardRoute = function(routeInfo, params, instance){
        if (params.fragment === ''){
            return routeInfo.router.routes[0].hash;
        }
        return true;
    };

https://github.com/dFiddle/dFiddle-2.0/blob/gh-pages/app/shell.js

Something similar should be doable on second level navigation, but I haven't tested this.

Thanks I saw the fiddle link and got the source code of what you accomplished that really helps. — Elisabeth, Oct 11 '13 at 15:54

How to define a standard child route in the durandal sample application

1 Answers1