Tabs and child routers - Durandal

Question

I am having a hard time understanding Durandal child routers. I would appreciate a little help from the community. I would like to create a child router underneath my main tab router. If a user clicks on tab B rather than tab A, I want my child router exposed.

               _______ 
Tab A          |Tab B |
_______________|      |_______________          
            Button one     Button Two
_______________________________________

Shell.js

define(['plugins/router'], function(router) {
   return {
      router: router,
      activate: function() {
         router.map([            
            { route: ['', 'about'], title: 'About', moduleId: 'viewmodels/about', nav: true },
            { route: 'welcome*details', title: 'welcome', moduleId: 'viewmodels/welcome', nav: true, hash: '#welcome' }
         ]).buildNavigationModel();

         return router.activate();
      },
   };
});

viewmodel 1

welcome.js

define(['durandal/system', 'plugins/router'], function (system, router) {

        var vm = {
            activate: activate,
            childRouter: childRouter
    };

    function activate(){
        system.log('*sol');
    };

    var childRouter = router.createChildRouter()
        .makeRelative({
            moduleId: 'marvins',
            fromParent: true
        }).map([
            { route: 'marvins', moduleId: 'viewmodels/marvins', title: 'marvins', nav: true },
        ]).buildNavigationModel();

    return {
        router: childRouter
    };

    return vm;

});

viewmodel 2

Marvins.js

define(['durandal/system', 'plugins/router'], function (system, router) {

    var vm = {
        activate: activate
    };

    function activate() {
        system.log('*dish');
    };

    return vm;

});

welcome.html

<div class="starsandbars">
    <h1>Welcome to Durandal.js</h1>
    <p>The most frustrating framework to learn</p>
    <div data-bind="router: {transition: 'entrance'}"></div>
</div>

marvins.html

<ul>
     <li>button one</li>
     <li>button two</li>
</ul>

navbar.html

<nav class="navbar" role="navigation">
        <ul id="navright" class="nav nav-tabs" data-bind="foreach: router.navigationModel">
            <li data-bind="css: { active: isActive }">
                <a data-bind="attr: { href: hash },
                        css: { active: isActive }, text: title">
                </a>
            </li>
        </ul>
</nav>

score 0 · Answer 1 · answered Oct 07 '14 at 10:53

First off, the child router setup is incorrect. The relative moduleId must be the module you are current writing it in.

var childRouter = router
    .createChildRouter()
    .makeRelative({
        moduleId: 'viewmodels/welcome',
        fromParent: true
    })
    .map([
        { route: 'marvins', moduleId: 'marvins', title: 'marvins', nav: true },
    ])
    .buildNavigationModel();

Since marvins is relative to viewmodels/welcome, it must be located at viewmodels/welcome/margins.js.

Then in the welcome.html page, you need to create a viewport for the router. All navigations on this child router will be dumped there:

<div class="starsandbars">
    <h1>Welcome to Durandal.js</h1>
    <p>The most frustrating framework to learn</p>
    <div data-bind="router: { router: childRouter, transition: 'fade' }"></div>
</div>

The child routing isn't well documented, but if you download the samples from Durandal's website, it becomes quite easy to follow what is going on.

Tabs and child routers - Durandal

1 Answers1