Geek Answers Handbook

Dynamically adding / removing a route to the Durandal Router when loading the application

I need help dynamically adding / removing routes in the Durandal Router. I want that after a user logs in, I can add or remove a specific route depending on the user's type of login.

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

I was hoping this would be a common scenario ... but still could not find any solution ... help me fix this problem.

Thanks. Vasim

REVIEWS AFTER:

I tried this function to dynamically hide / show a route ... and a similar one tried to add / remove a route from allRoutes [] ... but then get an exception with a pess knockout

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); } } }
+4
source share
4 answers

I had a similar requirement. If I were you, I would take a different approach. Instead of adding / removing routes when loading the application - get the right routes to start with each type of user.

Two options, (I use both) 1) to have a json service providing the correct routes for each type of user, this approach would be good if you need to "protect / hide" routes ... i.e. I do not want the route to be specified on any client resource. 2) For a simpler solution, see Durandal.js: changing navigation options for each area . You may have a settings property that determines the type of user.

Hope this helps.

0
source

Durandal 2.0 no longer has a visibleRoutes method. 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 can try using the router.routes property to rebuild the array of routes.

+2
source

In Durandal 2.0.

You can list the routes to find the one you want to show / hide.

Then change the value: 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; } }
+2
source

I had a similar problem: firstly, router.visibleRoutes() is an observable array. In other words, when you change your value, routes are automatically updated. However, elements in this array are not observed, so to make changes you need to replace the entire array, and not just make changes to one element in it.

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

If, for example, you find out that this is the third element, then one way to do this is:

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

Note that splice() returns a new array in which the element is deleted. This new array is placed in router.visibleRoutes .

0
source

More articles:


All Articles