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 page and having nested layout pages which implement the nav for each area. The view structure in durandal is as follows:

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

I'm using the ASP.NET MVC4 durandal template and I am guessing that I might need to change the following segement from 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>

I suppose that ideally I'd like to have separate html pages that could be loaded into this section depending on which area / page I am viewing.

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