CODEWITHSUNDEEP
durandal
Wasim Akram
Wasim Akram

Reputation: 65

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

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

Upvotes: 4

Views: 4291

Answers (4)

Matt
Matt

Reputation: 1610

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.

Upvotes: 2

GregJF
GregJF

Reputation: 466

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

Upvotes: 2

beamish
beamish

Reputation: 2827

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.

Upvotes: 0

Kurt
Kurt

Reputation: 96

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.

Upvotes: 0

Related Questions