Вкладки и дочерние маршрутизаторы - Durandal

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 вам необходимо создать окно просмотра для маршрутизатора. Все Navigations на этом маршрутизаторе ребенка будут сброшены там:

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

Ребенок маршрутизация не хорошо документирована, но если вы загружаете образцы с сайтом Дюрандаль, он становится довольно легко следовать тому, что происходит.