I'm trying to create a customized todo list, loosely based on the Backbone todoMVC tutorial app.
I've created a CompositeView that shows a collection using separate ItemViews. My understanding is that whenever a new model is added to the CompositeView's collection, it will automatically generate an ItemView for that model and add it to the CompositeView's el.
However, this doesn't work for me. I've confirmed that the model gets created in the database, but the view fails to update automatically. I can see the Todo when I refresh the page. I've even tried setting up the collectionEvents hash to watch for any models being added, but those methods (newTask, collectionFetched) never fired.
Here's my code for the CompositeView:
app.Views.TodosCompositeView = Backbone.Marionette.CompositeView.extend({
template: '#todo-list-template',
childView: app.Views.TodoItemView,
childViewContainer: 'tbody',
emptyView: app.Views.TodoEmptyView,
initialize: function() {
this.collection = new app.Collections.Todos();
this.collection.on('reset', this.render, this);
this.collection.fetch();
},
collectionEvents: {
'add': 'newTask',
'reset': 'collectionFetched'
},
newTask: function() {
console.log('new todo added');
},
collectionFetched: function() {
console.log('collection was fetched');
}
And the show method in my route:
app.Views.todosListView = new app.Views.TodosCompositeView();
app.mainRegion.show(app.Views.todosListView);
A similar question mentioned passing the collection as an option in the constructor for the compositeView, i.e. new app.Views.TodosCompositeView({collection:todos}) That didn't help either.
