Backbone.Marionette CollectionView callback when all itemViews have finished rendering?

Question

I'm using the marionette Layout .show to render a CollectionView and was wondering if there is a way of detecting when all the ItemView children have finished rendering?

A simplified version of my code is:

Layout

Layouts.Group = Backbone.Marionette.Layout.extend({

    template: Templates.group,

    ...

    regions: {
        header: ".group-header"
        details: ".group-details"
    },

    ...

});

CollectionView

Views.GroupDetail = Backbone.Marionette.CollectionView.extend({

    itemView: groupDetailRow,

    ...

    onRender: function () {

        // do something here after rendering *all* groupDetailRows of information for group detail section

    }

});

ItemView

Views.GroupDetailRow = Backbone.Marionette.ItemView.extend({

    onRender: function () {

        // single groupDetailRow of information

    }

});

.show

var details = new Views.GroupDetail();

details.show(new DV.Time.Views.GroupDetail());

I noticed in the docs that there is mention of a .done function:

new MyCollectionView().render().done(function(){
  // all of the children are now rendered. do stuff here.
});

Is it possible to use this with the Layout?

Answer 1

You can listen to a "render" event, or provide an "onRender" callback function on the view.

MyView = Marionette.CollectionView.extend({

  onRender: function(){
    // the list of items has been rendered. do stuff here
  }

});

var view = new MyView();

view.on("render", function(){
  // the list of items has been rendered. do stuff here
});

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#render--onrender-event