I need to pass a value to the listView.template
in order to be aware the template about the collection.length
.
I think one option is to redefine the serializeData method in order to pass a parameter in this way.
var ListView = Marionette.CompositeView.extend({
initialize: function () {
this.collection.on('reset', this.serializeData, this);
this.collection.on('remove', this.serializeData, this);
this.collection.on('add', this.serializeData, this);
},
serializeData: function () {
console.log(this.collection.length);
return {
has_tasks: this.collection.length > 0
};
},
// other codes
});
When I start the app
the collection
is not yet fetched so:
1.a) the collection.legth = 0
2.b) the template get has_tasks = false
as expected.
2.a) after the fetch the collection.length is > 0
,
2.b) the serializeData
is called and so it puts the has_tasks = true
,
2.c) the template seems to be not rendered because it maintains the has_tasks = false
Any idea because 2.c
?
Latest Marionette has solved this problem by calling an optional templateHelpers
on the view to provide additional context to the view. Also your event binding is not Marionette-friendly as it it will not be auto-unbound correctly when the view is unloaded. So all you need to do in your view is:
var ListView = Marionette.CompositeView.extend({
initialize: function () {
this.bindTo(this.collection, "add", this.render, this);
this.bindTo(this.collection, "remove", this.render, this);
this.bindTo(this.collection, "reset", this.render, this);
},
templateHelpers: function () {
console.log(this.collection.length);
return {
has_tasks: this.collection.length > 0
};
},
// other codes
});
Note, however, that you probably don't want to rerender the entire view and all the sub-elements every time an item is added or removed. A better approach is to only update the count displayed. For instance:
var ListView = Marionette.CompositeView.extend({
initialize: function () {
this.bindTo(this.collection, "add", this.updateCount, this);
this.bindTo(this.collection, "remove", this.updateCount, this);
this.bindTo(this.collection, "reset", this.updateCount, this);
},
updateCount: function() {
this.$('.count_span').html(this.collection.length);
},
// other codes
});