Backbone.js only causes error in IE7

Question

I am developing a web application with CodeIgniter at the back-end and Backbone.js at the front-end. I also use the HTML5 Boilerplate as a starting template.

I use Backbone Controller and History as the main navigation for my application. I have done this once in the past, and everything works fine. The problem is that when I start the hashchange event capture using Backbone.History.start () and click the example.com/#home link, changing the hash in the URL, the event fires, but after 2 seconds the hash is cleared of the url and the error javascript throws only in ie7.

I took a look at the source code and the hashchange event came up in IE7, creating an IFRAME that spans to check for a change in the hash value.

Someone had this weird mistake before and know how to solve it?

Answer 1

The correct way to handle the underlying #hash application using Backbone seems to be Backbone.history.saveLocation (hash) and after Backbone.history.loadUrl () to enable controller routing.

What I knew before ... Enjoy this amazing MVC library :)

Answer 2

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

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

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

Answer 3

Clicking on the hash URL does not actually save the history record in IE - use the Backbone saveLocation function to remove the location marker where you want to return. Full scoop:

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

Answer 4

I found a solution to this problem from John Leighton in the official list of issues: https://github.com/documentcloud/backbone/issues/228

Until the official patch adds this to backbone.js (line 689 in Backbone 0.3.3)

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

after the next line:

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

(I could not write the full i-frame tag <and / "> - it is not allowed here :))