選項卡和子路由器 - 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

回答

相關問題