Backbone.js cause bug only in IE7

Question

I'm developping a web app with CodeIgniter on back-end and Backbone.js on front-end. I'm also using HTML5 Boilerplate as my start template.

I'm using Backbone's Controller and History as main navigation through my application. I've done it one time in the past and everything have work fine. The problem is, when i start hashchange event capture with Backbone.History.start() and click on a link example.com/#home, the hash change in the url, the event is fired but 2 seconds after, the hash is cleared from url and an javascript error is throw only in ie7.

I've take a look at source code and hashchange event is acheived in IE7 by creating an IFRAME running an interval to check hash value change.

Anyone had this weird bug before and know how to solve this?

Answer 1

The right way to handle an #hash base application with Backbone seems to Backbone.history.saveLocation( hash ) and after Backbone.history.loadUrl() to enable Controller's routing.

Whish i knew this before... Have fun with this awesome MVC library :)

Answer 2

The solution that I found to work was to use Ben Alman's hashchange plugin . Go to the start function in Backbone.History and replace the code of the start function with this.

start : function() {
    $(window).hashchange(this.checkUrl);
    return this.loadUrl();
}

And be sure to include the hashchange plugin file in your code.

Answer 3

Clicking on a hash-URL does not actually save a history entry in IE -- use Backbone's saveLocation function to drop a marker of a location you want to be able to go back to. For the full scoop, see:

http://documentcloud.github.com/backbone/#Controller-saveLocation

Answer 4

I found a solution for this problem from Jon Leighton in the offical issue list: https://github.com/documentcloud/backbone/issues/228

Until an offical patch add this to the backbone.js (line 689 in Backbone 0.3.3)

this.iframe.document.open().close(); 
this.iframe.location.hash = window.location.hash;

after the following line:

this.iframe = $('iframe src="javascript:0" tabindex="-1" ').hide().appendTo('body')[0].contentWindow;

(I couldn´t write the complete i-frame tag < & /> - it isn´t allowed here :))