Durandal.js: zmień opcje nawigacji dla obszaru

Question

Chcę mieć inną nawigację dla "obszaru" mojej durandalnej aplikacji. Osiągnąłem to z ASP.NET MVC, gdy używam Obszarów, definiując sekcję Nav na stronie układu i mając zagnieżdżone strony układu, które implementują nawigację dla każdego obszaru. Struktura widok w Durandal jest następujący:

http://i1346.photobucket.com/albums/p697/user2269352/viewstructure_zps5e21e724.gif

Używam Durandal szablon ASP.NET MVC4 i zgaduję, że może trzeba zmienić następujące segement z shell.html

<ul class="nav" data-bind="foreach: router.visibleRoutes"> 
    <li data-bind="css: { active: isActive }"> 
     <a data-bind="attr: { href: hash }, html: name"></a> 
    </li> 
</ul> 

Podejrzewam, że chciałbym mieć osobne strony html, które można załadować do tej sekcji w zależności od tego, który obszar/stronę oglądam.

Answer 1

Można to osiągnąć, dodając obiekt ustawień do informacji o trasie i określając tam nazwę obszaru. Mając to na miejscu, stwórz obliczone obserwowalne w stosunku do kolekcji visibleRoutes routera, która wybiera tylko trasy dla bieżącego obszaru.

Nie wiesz, co konfiguracja trasa wygląda, ale przykład dodając ustawienia byłoby coś takiego:

var routes = [ 
    { url: 'one/page1', moduleId: 'viewmodels/one/page1', name: 'Page 1', visible: true, settings: {area: 'one'} }, 
    { url: 'two/page1', moduleId: 'viewmodels/two/page1', name: 'Page 1', visible: true, settings: {area: 'two'} } 
]; 
router.map(routes); 

w widoku modelu, w którym jesteś kontrolowania html nawigacja:

//filter the visible routes for the current area 
viewModel.areaRoutes = ko.computed(function() { 
    var area = this.area; 
    return ko.utils.arrayFilter(router.visibleRoutes(), function (route) { 
     return route.settings.area === area; 
    }); 
}, viewModel); 

Answer 2

Rozwiązanie oparte na Joseph Gabriel działa dla mnie i gra z router.activeItem.settings.areSameItem Mogę ustawić grupę każdej trasy w dowolnym miejscu na moim układzie.

router.activeItem.settings.areSameItem = function (currentItem, newItem, activationData) { 
    return currentItem == newItem; //replace this with your own code 
};