Durandal.js: change navigation options per area

Question

I want to have different navigation per \"area\" of my durandal application. I\'ve achieved this with ASP.NET MVC when using Areas by defining a Nav section in the layout p

Answer 1

You can accomplish this by adding a settings object to your route info, and specifying the area name there. With that in place, create a computed observable against the router's visibleRoutes collection that selects only the routes for the current area.

Not sure what your route configuration looks like, but an example of adding settings would be something like this:

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

In your view model where you are controlling the navigation html:

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

Joseph Gabriel based solution works for me and playing with router.activeItem.settings.areSameItem I can set every route's group anywhere at my layout.

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