I'm having trouble seeing why models aren't showing up when my collection view instantiates. The array is called, and when I call notes.models
I get the right number of records. But, the console.log(note)
is supposed to be called, nothing happens. So, the fetch seems to be working, and there is data, I can see it in the response, it's just not being passed into the collection.each
view. Any help is welcome. Here's everything.
The TastpieCollection and TasttypieModel come from http://paltman.com/2012/04/30/integration-backbonejs-tastypie/ which seems to work really well.
$(function() {
// Note: The model and collection are extended from TastypieModel and TastypieCollection
// to handle the parsing and URLs
window.Note = TastypieModel.extend({});
window.Notes = TastypieCollection.extend({
model: Note,
url: NOTES_API_URL
});
// starts by assigning the collection to a variable so that it can load the collection
window.notes = new Notes();
window.NoteView = Backbone.View.extend({
className: "panel panel-default note",
template: _.template($('#notes-item').html()),
initialize: function () {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
window.NoteListView = Backbone.View.extend({
id: "notes-block",
className: "panel panel-info",
template: _.template($('#notes-item-list').html()),
initialize: function () {
_.bindAll(this, 'render');
this.collection.bind('change', this.render);
},
render: function() {
this.$el.html(this.template());
this.collection.each(function(note){
//var view = new NoteView({ model: note });
console.log(note);
//$('#notes-list').append(view.render().el);
});
console.log('done');
return this;
}
});
window.NotesRouter = Backbone.Router.extend({
routes: {
"": "list",
'blank': 'blank'
},
initialize: function() {
this.notesView = new NoteListView({
collection: window.notes
});
notes.fetch();
},
list: function () {
$('#app').empty();
$('#app').append(this.notesView.render().el);
console.log(notes.length);
},
blank: function() {
$('#app').empty();
$('#app').text('Another view');
}
});
window.notesRouter = new NotesRouter();
Backbone.history.start();
})
The answer is that it is working. It's not working they way I want, but the code above does work. So I'm going to ask this question in a different way to get to the heart of the issue.