CODEWITHSUNDEEP
backbone.jsbackbone-views
Alex Grs
Alex Grs

Reputation: 3301

Error when importing Backbone.js

I just started to learn backbone following this online ebook.

But I'm stuck to ToDo App creation due to an import error I really do not understand...

I download Backbone.js and backbone-min.js from Backbone Official Website

In my index.html I tried to import Backbone or Backbone-min.js and got the following results in Firebug console:

Importing Backbone.js

<script src="js/lib/zepto.min.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>

TypeError: this.$el.off is not a function
backbone.js line 1325 : this.$el.off('.delegateEvents' + this.cid);

Importing Backbone-min.js

<script src="js/lib/zepto.min.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone-min.js"></script>

TypeError: this.listenTo is not a function
app.js line 34 : this.listenTo(app.Todos, 'add', this.addOne);

app.js is refering to this backbone view, here are a code extract from this view:

initialize: function() {
  this.allCheckbox = this.$('#toggle-all')[0];
  this.$input = this.$('#new-todo');
  this.$footer = this.$('#footer');
  this.$main = this.$('#main');

  this.listenTo(app.Todos, 'add', this.addOne);
  this.listenTo(app.Todos, 'reset', this.addAll);
  this.listenTo(app.Todos, 'change:completed', this.filterOne);
  this.listenTo(app.Todos,'filter', this.filterAll);
  this.listenTo(app.Todos, 'all', this.render);

  app.Todos.fetch();
},

If you already had this kind of issue... I have to admit I really do not understand why I have an error when I try importing backbone and I'm not enough skilled yet to understand the issue with ListenTo function...

Upvotes: 2

Views: 3601

Answers (3)

Naren
Naren

Reputation: 288

I got the same problem with one of the project that I have downloaded from github. I got the latest scripts from the following locations and it is working fine now.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>

Cheers

Upvotes: 2

Sadik
Sadik

Reputation: 676

1) this.listenTo is added in the recent version of the Backbone so probably the Backbone library you're using is outdated. Try with the latest version of Backbone. 2) this.$el : you should use jQuery for it. If this error occurs again after adding jQuery then, put console.log(this.$el) above this line..if it is getting an element it will print that otherwise [] or undefined.

As per the official documentation, Backbone's only hard dependency is either Underscore or Lo-Dash. But you should use RequireJS with it to set the order of js file download.

Upvotes: 1

Akos K
Akos K

Reputation: 7133

You have to include underscore.js before backbone:

<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>

http://backbonejs.org/ says:

Backbone's only hard dependency is either Underscore.js ( >= 1.4.3) or Lo-Dash. For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include json2.js, and either jQuery ( >= 1.7.0) or Zepto.

In addition, if you want to use jQuery selectors ($) in your code, include jQuery too.

Upvotes: 3

Related Questions