Backbone.js web application is unusable on Internet Explorer

Question

I have developed my web application w/o testing it on IE. Though it worked fine on all the browsers viz. Chrome, Firefox, Safari but when it comes to IE there is a strange behavior.

Sometimes the app loads and some times a blank page is loaded as if none of the "bind" events had any effect.

And the lucky times when the app loads, the nav panel is partially missing. I can't show you the code right now coz I am not sure what part to show and where I am doing it wrong.

If anyone of you can provide me a checklist of what to check and what tools would be ideal for debugging on IE then it would be great.

And if anyone of you can tell me most common backbone.js bugs on IE then that too would help.

PS: Version of IE I am testing with: IE8

Answer 1

Some issues in IE are:

Trailing commas on Objects:

E.g.

 App.model = Backbone.Model.extend({
   url: "/foo/bar",

   validate: function() {
   },
 });

Should be:

 App.model = Backbone.Model.extend({
   url: "/foo/bar",

   validate: function() {
   }
 });

The use of functions that are not available in IE such as lastIndexOf()

A third thing to check for is invalid HTML. IE can be particularly picky about your HTML structure. Be sure that all open tags either have a matching close tag, or are self closing with />

If you are using JSON methods such as JSON.parse() and JSON.stringify() then be sure to include a JSON library such as JSON2.