javascript - タブと子ルーター - Durandal

Question

デュランダルの子ルーターがよくわかりません。コミュニティから少し助けていただければ幸いです。メイン タブ ルーターの下に子ルーターを作成したいと考えています。ユーザーがタブ A ではなくタブ B をクリックすると、子ルーターが公開されます。

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

ビューモデル 1

ようこそ.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;

});

ビューモデル 2

Marvins.js

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

    var vm = {
        activate: activate
    };

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

    return vm;

});

ビュー 1

ようこそ.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>

ビュー 2

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>