选项卡和子路由器 - Durandal答案

【问题标题】：Tabs and child routers - Durandal选项卡和子路由器 - Durandal
【发布时间】：2017-06-23 09:10:05
【问题描述】：

我很难理解 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

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;

});

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

【问题讨论】：

标签： javascript url-routing parent-child durandal-2.0 durandal-navigation

【解决方案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 的网站下载示例，就可以很容易地了解发生了什么。

【讨论】：