CODEWITHSUNDEEP
durandal-2.0durandal-navigation
crush
crush

Reputation: 17013

isActive is not true for two routes that route to the same moduleId in Durandal 2.1

I have a pretty basic route that I barely modified from the Durandal Documentation.

Basically, I'm setting up a default route, that should route to my home screen.

define([
    'durandal/system',
    'plugins/router',
    'durandal/app'
], function (system, router, app) {
    return {
        router: router,
        activate: function () {
            router.map([
                { route: '', moduleId: 'viewmodels/file-history', title: 'File History' },
                { route: 'file-history', moduleId: 'viewmodels/file-history', title: 'File History', nav: true },
                { route: 'bureaus', moduleId: 'viewmodels/bureaus', title: 'Bureaus', nav: true },
                { route: 'contributors', moduleId: 'viewmodels/contributors', title: 'Contributors', nav: true },
                { route: 'users', moduleId: 'viewmodels/users', title: 'Users', nav: true }
            ]).buildNavigationModel();

            return router.activate();
        }
    };
});

Then, I have a view with the following HTML generation the navigation bar.

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

This creates links for File History, Bureaus, Contributors, and Users. However, if I browse to the site via the default route, File History navigational link is not marked as isActive, despite it being the selected module.

How can I get both of my first two routes to share the "isActive" observable when either is activated?

Upvotes: 0

Views: 111

Answers (1)

crush
crush

Reputation: 17013

This doesn't appear to be mentioned anywhere in the documentation, but route can take an array of possible routes. I actually came across this wading through bug reports for Durandal.

Therefore, by specifying my "File History" route as follows, I get the intended effect:

{ route: ['', 'file-history'], moduleId: 'viewmodels/file-history', title: 'File History', nav: true },

Upvotes: 2

Related Questions