Backbone this.model.models undefined error - backbone.js

Question

I´m trying to fetch a mongodb collection from my server (node.js) and using backbone render this content on a template (underscore). Mongodb and node.js part works fine cause i proved to do a console.log with the collection and it brings me the collection. I have the code below (I cutted some parts of code that are irrelevant):
router.js
appRouter.on('route:books', function () {
var bookList = new BookCollection();
bookList.fetch({
success: function () {
$('#content').html(new BookListView( { model: bookList } ).el);
}
});
});
bookListView.js
, render: function () {
var books = this.model.models;
$(this.el).html(this.template());
_.each(this.model.models, function(book) {
$('.thumbnails', this.el).append(new BookListItemView( { model: book } ).render().el);
}, this);
}
bookListItemView.js
, render: function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
My problem is that this.model.models = undefined and i don´t understand why cause 5 minutes before the same code works perfectly. If I do console.log(this.model) it brings me the list of models.
My code is inspired on that repo https://github.com/ccoenraets/nodecellar from Christophe Coenraets
Hope your help, thak you, regards

Answer 1

This issue might because of you are calling the render method in some other place.
The collection is only populated after the fetch which is Async . So when the render method is called the model attribute is undefined. So you will see an error.
To fix this you have to call render only after the collection is populated and the view initialized.( In the success callback )
bookList.fetch({
success: function () {
var bookListView = new BookListView( { model: bookList } );
$('#content').html(bookListView.el);
bookListView.render(); // Need to call render here
}
});
Also why do you want too name in model which inturn is actually a collection.
( { collection: bookList }) makes more sense than ( { model: bookList } )