12

I am trying to create a simple backbone.js view with the following code:

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
        <!--<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            var BodyView = Backbone.View.extend({
                el:$('body'),
                initialize : function() {
                    console.log("view init");
                }
            });

            new BodyView();
        </script>
    </body>
</html>

But

I am getting an error Expecting a function in instanceof check, but got [object Object]

on this line - new BodyView();

This code is working if i use an older version of backbone.js(0.3.3)

Any idea why this error is happening and how to solve it?.Thanks in advance.

P.S - I have been mainly following http://backbonetutorials.com/what-is-a-view/ and http://documentcloud.github.com/backbone/#View for creating this sample backbone js app.

user700284
  • 13,540
  • 8
  • 40
  • 74

2 Answers2

19

Basic things you should check out :

Wrap your new BodyView() in jQuery.ready like this :

 var BodyView = Backbone.View.extend({
     el:$('body'),
     initialize : function() {
         console.log("view init");
     }
 });

 $(function() {
        new BodyView();
 });

Load jQuery before Underscore and Backbone

Your script line for jquery should be before that of Backbone.

Your code actually works : http://jsfiddle.net/vTuPJ/

Community
  • 1
  • 1
drinchev
  • 19,201
  • 4
  • 67
  • 93
  • answered 4 mins ago - drinchev, answered 5 mins ago - fguillen. it took me 1 minute for the jsfiddle :P – drinchev May 02 '12 at 10:33
  • Thanks.That did the trick.But any idea why jquery has to be loaded before backbone.Have not seen this point anywhere in the backbone.js website afaik.. – user700284 May 02 '12 at 10:39
  • Yep, because of [this line](https://github.com/documentcloud/backbone/blob/master/backbone.js#L42) in the source which loads jQuery in Backbone : – drinchev May 02 '12 at 10:44
  • 'Load jQuery before Underscore and Backbone' answered everything – Moak Jul 04 '12 at 03:05
  • I see something that shouldn't work, in my mind. The initialization of the "el" property to $('body') would seem to need the DOM loaded; isn't that initialization evaluated even before the var BodyView assignment? Before even getting to new BodyView()? – grantwparks Sep 18 '13 at 16:06
  • Never mind, I see it wrapped in the body tag. It does introduce a dependency I think, so that if this code is ever in a separate JS file, there will be restrictions on where its script tag can be. This could cause the same kind of confusion later on. – grantwparks Sep 18 '13 at 16:14
6

Works for me. Try to wrapper all the Backbone code in a documentReady block:

$(function(){
  // .. your backbone code
});​

Another thing is that maybe you have to change the order of the scripts loads:

  1. underscore
  2. jquery
  3. backbone
fguillen
  • 36,125
  • 23
  • 149
  • 210