Question

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?

Answer 1

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