Question

I’m learning backbone.js and already have a problem.

I’m loading my scripts with LABjs like this:

$LAB.setOptions({BasePath : path})
.script('libs/underscore.js?v=1.3.3')
.script('libs/backbone.js?v=0.9.2')
.script('libs/jquery.js?v=1.7')
.script('libs/bootstrap.min.js?v=2.0.2').wait()
.script('test.js');

In my test.js I have this (from backbonetutorials.com):

(function($){
SearchView = Backbone.View.extend({
    initialize: function(){
        alert("Alerts suck.");
    }
});

var search_view = new SearchView;
})(jQuery);

As you see this should give me an alert with text “Alerst suck.”.
Instead it throws an error on my firebug console – i is not a function (34 line of backbone.js).

If I try to initialize view like this var search_view = new SearchView({el: $('#some_dom_element')}); it gives me another error – invalid 'instanceof' operand i (34 line of backbone.js file).

jQuery object $ is defined.
I can initialize Backbone.js models without any problems. Just view throws those errors. What I am missing?

Answer 1

It seems that order in which scripts are loaded matters. I’ve loaded jQuery first now and it started to work. I’ve also tested it with non minified version of backbone.js and the error was more verbose $ is not a function. So again – loading jQuery before backbone.js fixed it.

EDIT: When loading jQuery after backbone.js when I do console.log($) right before view initialization it shows tha $ is a function. Why backbone.js fails to work then? Can someone explain this?