Question

我很难理解Durandal儿童路由器。我希望得到社区的一些帮助。我想在主标签路由器下面创建一个子路由器。如果用户单击选项卡B而不是选项卡A，我希望我的子路由器暴露。

               _______ 
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;

});

查看1

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>

查看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>

Answer 1

首先，子路由器设置不正确。相对moduleId必须是您当前正在编写它的模块。

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

由于marvins与viewmodels/welcome相关，因此必须位于viewmodels/welcome/margins.js。

然后在welcome.html页面中，您需要为路由器创建一个视口。此子路由器上的所有导航都将被转储到那里：

<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>

子路由没有很好的文档记录，但如果您从Durandal的网站下载样本，则可以很容易地了解正在发生的事情。

标签和子路由器 - Durandal

1 个答案: