Backbone.history is not updating in IE 9. Back button broken

Question

In our app, we actually have two Backbone SPA applications. The first one is for login, registration and other features for unauthenticated users. The URL for this would be something like http://www.example.com/registration#signin. Once you login, you are redirected to our main Backbone app at http://www.example.com/ui#home.

In my main UI app, I am using Backbone.history without pushState. The App file looks something like:

define(function (require) {    
    var App = new Marionette.Application();

    App.addInitializer(function (options) {
        ...
    });

    ...

    App.on('initialize:after', function () {
        $(function(){
            if (Backbone.history) {
                Backbone.history.start({ root: '/ui' });
            }
        });
        $.log("**WebApp**: Marionette app started.");
    });

    return App;
});

Of course, everything works flawlessly in any browser except IE 9 (and maybe 10, I need to check). In IE 9, all the routing works fine. Clicking links such as http://www.example.com/ui#anotherpage works. However, when the user clicks the Back button in their browser, they are not sent back to the last route fired. Instead, they are sent to http://www.example.com/registration#signin, which is the last page served by Node, our web server. As I click through links, I can see that history.length and Backbone.history.history.length are not updating.

All routes are fired from links/URL's. I'm not using router.navigate() within the code. Here are examples of our Router:

define(function (require) {
    var Backbone = require('backbone'),
        Marionette = require('marionette');

    return Backbone.Marionette.AppRouter.extend({
        appRoutes: {
            "": "showHome",
            "home": "showHome",
            "foo": "showFoo"
        }
    });
});

And Controller:

define(function (require) {
    var Backbone = require('backbone'),
        Marionette = require('marionette');

    return Backbone.Marionette.Controller.extend({
        showHome: function () {
            require(['webapp','modules/home'], function (WebApp) {
                WebApp.module("Home").start();
                WebApp.module("Home").controller.showModule();
            });
        },
        showFoo: function () {
            require(['webapp', 'modules/foo'], function (WebApp) {
                WebApp.module("Foo").start();
                WebApp.module("Foo").controller.showModule();
            });
        }
    });
});

UPDATE:

On further research, it turns out the problem is that older versions of IE don't record hash changes in their history. See - Change location.hash and then press Back button - IE behaves differently from other browsers. But I'm still not sure what the workaround for this would be. I'm guessing it would somehow involve manually handling hash change events with a plugin such as jQuery Hashchange and doing... something? Manually setting IE's history? Or crafting a custom history object and using it when we detect a Back button in IE?

Answer 1

I was having the same problem in one of our apps for IE. Starting backbone history like below works.

Backbone.history.start({
            pushState: true,
            hashChange: false
        });

Update: As mentioned By T Nguyen, When you set pushState to true, hash URL's no longer trigger routes. Unless you add server-side support for all your Backbone routes, you need to add an event handler on the client side which captures appropriate links and calls .navigate() on the route