Menu
Google Chrome developer tools console throws this error:
uncaught reference error: backbone is not defined
When this html file containing javascript with library backbone.js:
<!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?
287
You can't use Backbone before it's declaration.
Put the <script> tags before your own javascript code.
You must re-organize your javascript part like this :
<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>
This might be related. I was loading jQuery, Underscore and Backbone to my index.html from http://cdnjs.com hosted libraries using this 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 get access to $, _ and Backbone in Chrome, but if I try to open the page in Firefox I get: Uncaught ReferenceError: Backbone is not defined.. However when using links provided by Eric Leschinski:
<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 works fine.
25
<html>
<body>
<script type="text/javascript">
var AppView = Backbone.View.extend({
});
</script>
<div>mydiv</div>
</body>
</html>
You get an error:
ReferenceError: Backbone is not defined
var AppView = Backbone.View.extend({
You have not included the necessary backbone libraries.
This example has backbone defined:
<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 a jsfiddle see here: http://jsfiddle.net/ZfnbK/
It should show 4 popup boxes illustrating the path it takes through the code. When the render function is called, backbone uses jQuery to replace the contents of the div tag with: "Hello World".
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
