Backbone.js: workaround for implementing a slash url using pushstate in Internet Explorer

Question

I just made a complete mess. I upgraded to Backbone.js 0.9.1, updated the slash URLs, and started using pushstate:true . 5 days later, I am testing my application on IE9, and the URLs are simply not tied to the page to which they link.

I did something like this:

main.html

 <a href="/signup">Do Signup</a> 

The browser goes to mydomain.com/signup for a second and then returns to main.html with the URL mydomain.com/#signup .

Returning to pushstate:true fixes the problem with simple links, but breaks the fact that I have defined a router for routes such as ...

 SignupRouter = Backbone.Router.extend({ routes: { 'signup': 'signup', 'signup/:key': 'confirm' }, initialize: function() { // do some stuff here }, signup: function() { // signup view }, confirm: function() { // confirm view } }); 

If I do not use pushstate, I must return to the strategy of creating a separate route for each page and loading the router based on a variable on the server side (very primitive, I know):

 SignupRouter = Backbone.Router.extend({ initialize: function() { // signup view } }); ConfirmSignupRouter = Backbone.Router.extend({ initialize: function() { // confirm view } }); 

Is there any IE friendly way to do this (IE7 ~ 9)? Some workaround on server side? Anything?

Answer 1

If turning off pushState makes it work in browsers that don’t support it, try using the basic PushState test to disable it beforehand (this code is based on the _hasPushState variable in the baseline source):

 // Enable pushState for compatible browsers var enablePushState = true; // Disable for older browsers var pushState = !!(enablePushState && window.history && window.history.pushState); Backbone.history.start({ pushState: pushState });