Backbone app breaks in FF and IE9

Question

I have created a web app based on Backbone, ICanHaz and jQuery.

It can be found here: http://development.zeta-two.com/development/f14

It works perfect in Chrome (12.0.742.122) but breaks in FF5 (5.0.1) and IE9 (9.0.8112.16421).

Firefox

In FF I get no errors whatsoever, only a few warnings about CSS in qTip (a jquery plguin). It seems like it's failing on line 18 of PlayerView.js which looks like this.

$(this.el).html(ich.player(rendermodel.toJSON()));

I have verified that "this.el" is the HTML element and that "ich.player(rendermodel.toJSON())" contains the html to be inserted. I even tried something like

$(this.el).html('Test');

But not even that worked.

IE9

In IE9 it breaks line 12 of ItemDetailsView.js which looks like this.

data = this.model.toJSON();

The error is: Property or method toJSON is not supported by the object. Note that I have included json2.js

What are the causes of these two errors?

Answer 1

Firefox

The firefox bug was caused by line 18 of PlayersAppView.js which referred to this.players (this being the window object). In chrome this was apparently a reference to #players but in FF it's not. The bug was fixed by changing the context of underscore's _.each to this, i.e. the view.

IE

The IE bug was caused by line 25 of PlayersAppRouter.js where the variable "item" was not declared with the keyword "var" before it which made IE mix it up with the function "item".