Dynamically Adding / Removing Route in Durandal Router when application is loaded

Question

I need help in dynamically adding/removing route in Durandal Router. What I want is after user is logged in then I would be able to add or remove specific route depending upon logged in user's type.

I tried to add/remove route from visibleRoutes/allRoutes array ... but get binding exception from knockout library...

I was hoping it would be common scenario... but still couldn't find any solution ... please help me in fixing this issue.

Thanks. Wasim

POST COMMENTS:

I tried this function to dynamically hide/show route... and similary tried to add/remove route from allRoutes[] ... but then get exception on knockout bidning

showHideRoute: function (url,show) {

        var routeFounded = false;
        var theRoute = null;
        $(allRoutes()).each(function (route) {

            if (url === this.url) {
                routeFounded = true;
                var rt = this;
                theRoute = rt;
                return false;
            }
        });

        if (routeFounded)
        {
            if (show)
            {
                visibleRoutes.push(theRoute);
            }
            else
            {
                visibleRoutes.remove(theRoute);
            }
        }
    }

Please post some code of how you were trying to do it, what errors you got, and any context for said code. — Kal_Torak, Apr 08 '13 at 14:13
Post the error please. Also, setting `theRoute=this;` looks highly suspicious. I'd want to throw a breakpoint on that to double check, but I doubt it's giving you the result you're expecting. I'd recommend looking at the router.js file to see the signature for adding a new route. — Kal_Torak, Apr 08 '13 at 15:04
This function is written in 'router.js' and in the function "this" points to the route I want to show/hide and this is the exception i m getting "---Uncaught Error: Unable to parse bindings. Message: ReferenceError: isActive is not defined; Bindings value: css: { active: isActive } ---" after that function is executed — Wasim Akram, Apr 08 '13 at 16:50
So have you paid attention to the error and checked to make sure that an `isActive` property is defined on your viewmodel? The KO errors are quite informative. — Kal_Torak, Apr 08 '13 at 18:40
isActive is not in my viewmodel and it should not be. its a router.js property and this error has to do something the way I am making my route visible/notvisible.... and that was my original question to how to fix this... I hope now I would have make my problem abandonedly clear !!! — Wasim Akram, Apr 09 '13 at 05:26

score 2 · Answer 1 · edited Feb 17 '17 at 01:30

Durandal 2.0 no longer has the method visibleRoutes. I found that the following works for me.

router.reset();
router.map([
        { route: 'home', moduleId: 'home/index', title: 'Welcome', nav: true },
        { route: 'flickr', moduleId: 'flickr/index', title: '', nav: true }
])
.buildNavigationModel()
.mapUnknownRoutes('home/index', 'not-found');

This removes all previous routes, if you want to maintain current routes you could try using the router.routes property to rebuild the array of routes.

score 2 · Answer 2 · answered May 01 '14 at 04:49

In Durandal 2.0.

You can enumerate the routes to find the one you wish to show/hide.

Then change the value of: nav property

Then run buildNavigationModel();

here is an example:

// see if we need to show/hide 'flickr' in the routes
for (var index in router.routes) {
    var route = router.routes[index];
    if (route.route == 'flickr') {
         if (vm.UserDetail().ShowFlickr) { // got from ajax call
            // show the route
            route.nav = true;  // or 1 or 2 or 3 or 4; to have it at a specific order
         } else if (route.nav != false) {
            route.nav = false;
         }
         router.buildNavigationModel();
        break;
    }
 }

score 0 · Accepted Answer · edited May 23 '17 at 12:00

I had a similar requirement. If I were you, I would take another approach. Rather than adding/removing routes when application loads - get the right routes to begin with per user type.

Two options, (I use both) 1) have a json service provide the proper routes per user type, this approach would be good if you need to 'protect/obscure' routes... i.e. I don't want the route referenced on any client resource. 2) A simpler solution see Durandal.js: change navigation options per area You can have a settings property identify the user type.

I hope this helps.

score 0 · Answer 4 · edited Jul 30 '13 at 13:57

I had a similar problem: First, router.visibleRoutes() is an observable array. In other words, when you change its value, the routes automatically update. However, the items in this array are not observable, so to make a change you need to replace the entire array and not just make a change to a single item in it.

So, all you have to do is find which item in this array you want to remove, and then create a new array without this item, and set router.visibleRoutes() to this new array.

If, for example, you find out the it is the 3rd item, then one way of doing it is:

router.visibleRoutes(router.visibleRoutes().splice(2, 1))

Note that splice() returns a new array where an item is removed. This new array is put into router.visibleRoutes.

Dynamically Adding / Removing Route in Durandal Router when application is loaded

4 Answers4