En Backbone this.model no está definido, ¿por qué?

He buscado una respuesta en todas partes, pero no estaba satisfecho con lo que he encontrado.

El problema es que estoy haciendo un tutorial de Addy Osmani para hacer una aplicación 'Todo' en Backbone, pero cuando miro la console, me sale un error al decir que this.model is undefined .

Incluso probé este error de respuesta de model SO Backbone en la console , pero sigo teniendo el mismo error. Por favor dime que esta mal

Por cierto, ¿qué es this.model o this.collection ? Tengo una idea de que se refieren a Backbone.Model y Backbone.Collection pero ¿cómo funcionan? this.collection esto porque en otro tutorial this.collection y this.model.models tampoco fueron definidos, cuando this.model.models claramente el Model y la Collection .

Muchas gracias

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 }); 

Necesita crear una instancia de un Model o Collection y pasarlo a su Vista. De lo contrario, cuando se llame al método de renderizado en su TodoView, este this.model será nulo.

Por ejemplo, intente reorganizar las últimas líneas de su código de esta manera:

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

A partir de ese momento, puede modificar todos (que es una Collection ) y su vista puede escuchar los events de todos y volver a generarlos en consecuencia.

No lo dijiste, pero supongo que el error que estás obteniendo está ocurriendo en el método render ().

Su problema es que define un nuevo tipo de model ( var Todo = Backbone.Model.extend({... ) sin embargo, nunca lo instancia, ni pasa el model al constructor de todoview.

Por lo less, debes hacer lo siguiente:

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

La respuesta en la otra pregunta es la respuesta a su pregunta: no está pasando el model a la vista cuando crea una instancia de la vista.

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

Cuando pasas un object al constructor de una vista, busca ciertas teclas y las adjunta directamente a la vista.

Puedes ver cuál mirando la fuente de Backbone y buscando viewOptions .

Así es como obtienes el this.model y this.collection adjuntados automáticamente a la vista.