I am using Marionette.CompositeView and I would like to understand the difference between serializeData and onRender based on these two exemple (1) and (2).

According the documentation serializeData is called in render before applying the template, and onRender is called in render after applying the template.

My questions are:
1) why the example (1) works and the (2) does not?
2) If I reset the collection, will the Marionette.CompositeView be re-rendered?

Please see the ments in the code for more details.

(1)

return Marionette.CompositeView.extend({

        initialize: function () {
            this.collection = new MyCollection();
            this.collection.fetch();
        },

        onRender: function () {
            this.collection.length > 0 ? this.$el.show() : this.$el.hide();
           // it returns this.collection.length > 0 
           // differently from serializeData.
        }
});

(2)

return Marionette.CompositeView.extend({

        initialize: function () {
            this.collection = new MyCollection();
            this.collection.fetch();
        },

        serializeData: function () {
            this.collection.length > 0 ? this.$el.show() : this.$el.hide(); 
           // it returns this.collection.length = 0 
           // even if this.collection.length > 0. Why?
        }
});

I am using Marionette.CompositeView and I would like to understand the difference between serializeData and onRender based on these two exemple (1) and (2).

According the documentation serializeData is called in render before applying the template, and onRender is called in render after applying the template.

My questions are:
1) why the example (1) works and the (2) does not?
2) If I reset the collection, will the Marionette.CompositeView be re-rendered?

Please see the ments in the code for more details.

(1)

return Marionette.CompositeView.extend({

        initialize: function () {
            this.collection = new MyCollection();
            this.collection.fetch();
        },

        onRender: function () {
            this.collection.length > 0 ? this.$el.show() : this.$el.hide();
           // it returns this.collection.length > 0 
           // differently from serializeData.
        }
});

(2)

return Marionette.CompositeView.extend({

        initialize: function () {
            this.collection = new MyCollection();
            this.collection.fetch();
        },

        serializeData: function () {
            this.collection.length > 0 ? this.$el.show() : this.$el.hide(); 
           // it returns this.collection.length = 0 
           // even if this.collection.length > 0. Why?
        }
});

• javascript
• backbone.js
• marionette

1 Answer 1

1) As you said, onRender is just a callback function which is called after rendering the view.

serializeData must return a valid JSON object as it's said in the Backbone Marionette documentation :

If you need custom serialization for your data, you can provide a serializeData method on your view. It must return a valid JSON object, as if you had called .toJSON on a model or collection.

Backbone.Marionette.ItemView.extend({
  serializeData: function(){
    return {
      "some attribute": "some value"
    }
  }

});

2) IMO, the answer is yes. In the Backbone Marionette documentation, it's said :

CollectionView: Automatic Rendering

The collection view binds to the "add", "remove" and "reset" events of the collection that is specified.

When the collection for the view is "reset", the view will call render on itself and re-render the entire collection.

When a model is added to the collection, the collection view will render that one model in to the collection of item views.

When a model is removed from a collection (or destroyed / deleted), the collection view will close and remove that model's item view.