Geek Answers Handbook

Backbonejs: trunk not defined error

The Google Chrome Developer Tool Console is causing this error:

uncaught reference error: backbone is not defined

When this html file contains javascript with the backbone.js library:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example Backbone APP</title> </head> <body> <script> Whisky = Backbone.Model.extend(); firstWhisky = new Whisky({ name : 'Blenders Pride' }); Whiskies = Backbone.Collection.extend({ Model:Whisky , url:"#" }); first_view = Backbone.View.extend({ el : 'body', initialize : function() { this.$el.empty(); this.render(); } , render : function() { this.$el.append("<h1>The Whisky APP</h1>"); this.list_view = new List_view(); this.$el.append(this.list_view.render().el); return this ; } }); List_view = Backbone.View.extend({ tagName : 'ul' , render : function() { this.$el.empty(); this.$el.append("<li>Royal stag</li>"); this.$el.append("<li>Signature </li> "); return this ; } }); index_view = new first_view(); </script> <script src="LIB/json2.js"></script> <script src="LIB/underscore-min.js"></script> <script src="http://code.jquery.com/jquery.js"></script> <script src="http://backbonejs.org/backbone.js"></script> </body> </html>

What is the reason for this error?

+4
source share
3 answers

You cannot use Backbone before listing.

Put <script> tags in front of your javascript code.

You should reorganize your javascript part as follows:

 <script src="LIB/json2.js"></script> <script src="LIB/underscore-min.js"></script> <script src="http://code.jquery.com/jquery.js"></script> <script src="http://backbonejs.org/backbone.js"></script> <script> Whisky = Backbone.Model.extend(); firstWhisky = new Whisky({ name : 'Blenders Pride' }); Whiskies = Backbone.Collection.extend({ Model:Whisky , url:"#" }); first_view = Backbone.View.extend({ el : 'body', initialize : function() { this.$el.empty(); this.render(); } , render : function() { this.$el.append("<h1>The Whisky APP</h1>"); this.list_view = new List_view(); this.$el.append(this.list_view.render().el); return this ; } }); List_view = Backbone.View.extend({ tagName : 'ul' , render : function() { this.$el.empty(); this.$el.append("<li>Royal stag</li>"); this.$el.append("<li>Signature </li> "); return this ; } }); index_view = new first_view(); </script>
+5
source

It may be related. I downloaded jQuery, Underscore, and Backbone into my index.html from http://cdnjs.com hosted libraries using the following links:

  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

as a result, I can access $, _ and Backbone in Chrome, but if I try to open a page in Firefox, I get: Uncaught ReferenceError: Backbone is not defined .. However, when using the links provided by Eric Leshchinsky:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>

everything is working fine.

+2
source

How to reproduce this error with a minimum number of lines:

 <html> <body> <script type="text/javascript"> var AppView = Backbone.View.extend({ }); </script> <div>mydiv</div> </body> </html>

You get an error message:

 ReferenceError: Backbone is not defined var AppView = Backbone.View.extend({

You have not included the required core libraries.

If you get this error, run this Hello world example:

This example defines the reference base:

 <html> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script> <div>Loading...</div> <script type="text/javascript"> alert("starting backbone"); var AppView = Backbone.View.extend({ el: 'div', initialize: function(){ alert("initializing backbone"); this.render(); }, render: function(){ alert("applying text to div attribute"); this.$el.html("Hello World"); } }); var appView = new AppView(); alert("done"); </script> </body> </html>

To run this example in jsfiddle, see here: http://jsfiddle.net/ZfnbK/

It should show 4 popups illustrating the path that it takes through the code. When the rendering function is called, backbone uses jQuery to replace the contents of the div: "Hello World" tag.

+1
source

More articles:


All Articles