In Backbone.Marionette.js CollectionViews and CompositeViews, the onDomRefresh event fires when the DOM is initially rendered and ALSO any time that an item is added to the view's collection (this contributes to the dynamic / "live" nature of the views). In my case, I want to run a certain jQuery function, but due to the typical length of the collection, it would be better to only call this function once at the last render to prevent excess function calls to something I only want to do once after all models are rendered in the UI.

Is there a Marionette event with the appropriate timing for this use case?

In Backbone.Marionette.js CollectionViews and CompositeViews, the onDomRefresh event fires when the DOM is initially rendered and ALSO any time that an item is added to the view's collection (this contributes to the dynamic / "live" nature of the views). In my case, I want to run a certain jQuery function, but due to the typical length of the collection, it would be better to only call this function once at the last render to prevent excess function calls to something I only want to do once after all models are rendered in the UI.

Is there a Marionette event with the appropriate timing for this use case?

• javascript
• marionette

• stackoverflow./questions/13529407/… ? Edit: Oh sorry, didn't see that you were asking for CollectionView. – Index Commented Oct 21, 2013 at 21:12
• No problem, also a CompositeView method would work, but not an itemView. – Brian Commented Oct 21, 2013 at 21:14

3 Answers 3

I had been trying to use Erik's solution all afternoon but the "collection:rendered" event is never fired. After trawling though the source I see it does not exist anymore :(

But there is a rather easy way to get the behaviour desired.

From within a CollectionView use the onAddChild callback to do the following:

onAddChild : function() {
// Check all the models in the collection have their child views rendered
  if ( this.children.length == this.collection.length ) {
    // Now you could do something like
    this.trigger("collection:rendered");
  }
}

It works because the collection count goes up to its new length instantly while the children length is updated one at a time.

Pretty simple, it has made me happy :) Hope it helps someone else too.

You can listen to "collection:rendered". Here is what the CollectionView triggers when it is done rendering children:

this.triggerMethod("collection:rendered", this);

You can use this:

this.listenTo(myCollectionView, "collection:rendered", _awesomeCallback);

Of course you will need to change the above.

EDIT:

Here is the render method for a collection view:

render: function(){
    this.isClosed = false;
    this.triggerBeforeRender();
    this._renderChildren();
    this.triggerRendered();
    return this;
  }

this.triggerRendered() fires off this.triggerMethod("collection:rendered", this), so the collection will be rendered before "collection:rendered" is triggered.

As of V2.4.1 http://marionettejs./annotated-src/backbone.marionette.html, it's now render:collection that you should be listening for after the CollectionView is done rendering the children.

_renderChildren: function() {
  this.destroyEmptyView();
  this.destroyChildren();

  if (this.isEmpty(this.collection)) {
    this.showEmptyView();
  } else {
    this.triggerMethod('before:render:collection', this);
    this.startBuffering();
    this.showCollection();
    this.endBuffering();
    this.triggerMethod('render:collection', this);

    if (this.children.isEmpty()) {
      this.showEmptyView();
    }
  }
},

I would remend against using mexitalian's answer as checking if the children.length == the collection.length will fire twice in the method onAddChild().