“uncaught Typeerror: Undefined Is Not A Function” In Backbone Application View

I'am trying to run my js application in browser, but when i do, i get this error in console: “Uncaught TypeError: undefined is not a function” app.js:18 I have read and tried o

Solution 1:

You need to upgrade your Backbone version if you want to use listenTo. From the fine ChangeLog:

0.9.9 — Dec. 13, 2012

• Added listenTo and stopListening to Events. They can be used as inversion-of-control flavors of on and off, for convenient unbinding of all events an object is currently listening to. view.remove() automatically calls view.stopListening().

The listenTo method showed up in Backbone 0.9.9 but you're using 0.9.1.

Read the ChangeLog and upgrade your Backbone version.

Solution 2:

this.listenTo(Todos, 'add', this.addOne);

You are using the Todos as an object that references to collection but the object for the collection in neither passed nor created in the view.

If you want to pass

var mycollection = new Todos();
new AppView({ myCollection: mycollection});

Since we are passing a key value we can fetch it back in view like

this.myCollection.add(model) or
this.myCollection.reset(); //to reset the collection

If you want to create a object for collection ,you can directly like the same way

var mycollection = new Todos();

Collections callback functions can be defined inside collection itself.This will help in reusing the function over multiple views .

Solution 3:

Had the same problem and after a few looks I realized that I misspelled the name of the element when i was initializing:

this.allCheckbox = this.$("#toggle-all")[0];

So, check the name of the elements in your html

Solution 4:

Quite sure your problem is not on that line, but rather:

this.input = this.$("#new-todo");
this.allCheckbox = this.$("#toggle-all")[0];