What is the correct way to override Marionette compositeview render

I am showing a table view using Marionette's composite view. The composite view's template has a tbody with an initial which shows a loadding animation gif.

Now, when the render method is called, I want to remove this initial row and then append the results of collection fetch. However the default render implementation of Marionette seems to be appending to the tbody.

My item template for item view:

<td><input type="checkbox" class="checkboxContact" id="<%-id %>"/></td>
<td><%-name %></td>
<td> <%-msisdn %></td>
<td> <%-email %></td>
<!--
<td> <%-address %></td>
<td> <%-last_modified_time %></td>-->
<td>
  <i rel="tooltip" class="fa fa-pencil-square-o actions"  id="editIcon" title="edit"></i>
  <i rel="tooltip" class="fa fa-trash-o actions" title="delete"></i>
</td>

The overridden render method, as below.

render: function() {
  if (this.collection.size() <= 0) return;

  this.$el.html(this.template((this.collection.toJSON()));
  return this;
}

I also tried

render: function() {
  if (this.collection.size() <= 0) return;

  this.$el.html(this.template({
    collection: this.collection.toJSON()
  }));
  return this;
}

None of these work.

Solution

I don't think you should be overriding your render. Marionette knows how to render things. I'd consider changing how you are implementing the spinner.

You may want to put a spinner onShow and turn it off after the collection syncs https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.compositeview.md#events-and-callbacks

When the collection updates your view will rerender. You can listen to before:render:collection and wipe out the row at that point if you want.