0

我很难理解 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();
      },
   };
});

视图模型 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

马文斯.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

马文斯.html

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

导航栏.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>
4

1 回答 1

0

首先，子路由器设置不正确。相对 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 的网站下载示例，就可以很容易地了解正在发生的事情。

于 2014-10-07T10:53:26.287 回答