选项卡和子路由器 - Durandal

我很难理解Durandal子路由器。我希望得到社区的一些帮助。我想在我的主选项卡路由器下创建一个子路由器。如果用户单击选项卡B而不是选项卡A，我希望公开我的子级路由器。选项卡和子路由器 - Durandal

   _______ 
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

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>

来源

2014-08-30 john Doe

首先，子路由器设置不正确。相对的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-07 10:53:26 Tim

选项卡和子路由器 - Durandal

回答

相关问题