In Backbone this.model is undefined, why?

Question

I searched everywhere for an answer, but was not happy with what I found.

The problem is that I am doing a tutorial from Addy Osmani to make the "Todo" application in Backbone, but when I look at the console, I get this.model is undefined error message.

I even tried this SO to answer The baseline model error displayed in the console , but I still get the same error. Please tell me what is wrong.

By the way, what is this.model or this.collection ? I have an idea that they relate to Backbone.Model and Backbone.Collection , but how do they work? I ask about this because in another tutorial, this.collection and this.model.models were also undefined when I clearly defined Model and Collection .

Many thanks

JS:

 //Model var Todo = Backbone.Model.extend({ defaults: { title: 'Enter title here', completed: true }, validate: function(attrs) { if (attrs.title === undefined) { return 'Remember to enter a title'; } }, initialize: function() { console.log('This model has been initialized'); this.on('change:title', function() { console.log('-Title values for this model have changed'); }); this.on('invalid', function(model, error) { console.log(error); }); } }); //View var TodoView = Backbone.View.extend({ el: '#todo', tagName: 'li', template: _.template($('#todoTemplate').html()), events: { 'dbclick label': 'edit', 'click .edit': 'updateOnEnter', 'blur .edit': 'close' }, initialize: function() { _.bindAll(this, 'render'); this.render(); }, render: function() { this.$el.html(this.template(this.model.toJSON())); this.input = this.$('.edit'); console.log(this.model.toJSON()); return this; }, edit: function() { //do something... }, close: function() { //do something... }, updateOnEnter: function() { //do something... } }); var todoview = new TodoView(); console.log(todoview.el); //Collection var TodoList = Backbone.Collection.extend({ model: Todo }); 

Answer 1

You need to create an instance of Model or Collection and pass it into your view. Otherwise, when the render method is called in your TodoView, this.model will be null.

For example, try rebuilding the last few lines of your code as follows:

 //Collection var TodoList = Backbone.Collection.extend({ model: Todo }); var todos = new TodoList(); var todoview = new TodoView({model: todos}); 

From now on, you can change todos (which is Collection ), and your view can listen to todos events and redraw accordingly.

Answer 2

You did not say, but I assume that the error you receive occurs in the render () method.

Your problem is that you define a new type of model ( var Todo = Backbone.Model.extend({... ), but you never create an instance, and you don't pass the model to the todoview constructor.

So at least you need to do:

 var todomodel = new Todo(); var todoview = new TodoView({ model: todomodel }); 

Answer 3

The answer in another question is the answer to your question: you do not pass the model to the view when you instantiate the view.

 var model = new Todo(); var todoview = new TodoView({model: model}); 

When you pass an object to a view constructor, it searches for specific keys and binds them directly to the view.

You can see that by looking at the Source database and searching viewOptions .

The way you automatically bind this.model and this.collection to the this view.