can't populate simple collection and output to view - backbone.js

Question

As you can see, I am very new at backbone, and I can't work out why this is not working???
I am getting this error?
Uncaught TypeError: Cannot call method 'on' of undefined
CODE
TodoItem = Backbone.Model.extend({});
TodoList = Backbone.Collection.extend({
model: TodoItem,
url: "todo"
});
var TodoView = Backbone.View.extend({
el: '#content',
initialize: function() {
this.model.bind('change', this.render, this);
},
render: function(model) {
this.$el.html('test');
}
});
$(function() {
var todoList = new TodoList();
todoList.fetch();
new TodoView();
});
URL TODO - JSON
[ {description: 'Pick up milk.', status: 'incomplete', id: 1},
{description: 'Get a car wash', status: 'incomplete', id: 2} ]

Answer 1

You're using this.model in your view:
initialize: function() {
this.model.bind('change', this.render, this);
},
but you don't specify a model when you create the view:
new TodoView();
That should look more like:
new TodoView({ model: some_model })
If you want the TodoView to look at the whole collection then use this.collection:
initialize: function() {
this.collection.on('change', this.render, this);
}
and supply the collection option when creating the view:
new TodoView({ collection: todoList });
Also note that todoList.fetch(); is an AJAX call so you probably won't have anything in todoList when you create your view, you can bind to the 'reset' event to re-render when something shows up:
initialize: function() {
_.bindAll(this, 'render');
this.collection.on('change', this.render);
this.collection.on('reset', this.render);
}
You can also use _.bindAll to bind a function to this, that way you don't need to use the third parameter to on.
BTW, bind is an alias for on, bind still works but on is the preferred method for new code; AFAIK, the name was changed to on to better match the newer jQuery naming scheme.