Backbone.js will not be routed to the same URL as the current one

Question

I am having trouble navigating / routing URLs. Say, for example, I am currently in #contact/new , and again I request the same url and then do not call the corresponding function. I need to change the URL, for example, to #contact/edit , and then press #contact/new . Is routing a URL from the same URL now a problem?

Answer 1

I decided to solve this problem by causing a silent transition to the root in advance:

 var url = window.location.pathname.substr(Backbone.history.root.length); this.navigate('/', { trigger: false }); this.navigate(url, { trigger: true }); 

Keep in mind that this will create an additional history record, but in my case this is not important.

You can also make it work without writing a history by changing the fragment property of the Backbone.history object, but this property should be private, so I would think twice before spoofing it :)

The fragment property is what is used to map the current URL to the URL that is passed to the navigation function, and thus the route will be executed if they do not match.

Answer 2

I have the same problem. Routing the same example.com/#/new URL (calling the same URL twice) will not start the route. I created a workaround by changing the URL after each routing:

 var url = window.location.href; url = url.substring(0,url.indexOf('#')) + '#/'; window.location.replace(url); 

or simpler:

 window.location.hash = '#/'; 

But this decision seems a little dirty to me.

Answer 3

I also tried to understand this problem. My last attempt was to add a function that adds a timestamp field to the link and then calls the navigation function:

 var AppRouter = Backbone.Router.extend({...}); var app_router = new AppRouter; function LoadLink(Link) { var Timestamp = new Date().getTime(); app_router.navigate("#/" + Link + "/ts_" + Timestamp); } 

This method allows me to have a link that can be clicked several times, however now I need to consider the timestamp when setting up routes. This may come back to bite me later. :(

Answer 4

I know I'm late for the party, but I solved a similar problem using the navigation function.

Try something like:

 this.navigate("#contact/edit", {trigger: false, replace: true}); 

Which changes the URL of the router, which believes that it is on # contact / edit, without actually causing an action.