Question

I have made a complete mess of things right now. I updated to Backbone.js 0.9.1, updated to slash based URLs and started using pushstate:true. 5 days later I test my app on IE9 and the URLs just don’t stick to the page they are linking to.

I did something like this:

main.html

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

Browser goes to mydomain.com/signup for a second, then jumps back to main.html with URL mydomain.com/#signup.

Reverting to pushstate:true does resolve the trouble of simple links but breaks down the things where I defined the router to have routes like…

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 don’t use pushstate I have to go back to the strategy of creating a separate route for every page and loading the router based on a server side variable (very primitive I know):

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

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

Is there some IE friendly way of doing 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 then try using the backbone PushState test to pre-emptively turn it off (this code is based on the _hasPushState variable in the Backbone 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 });