Display Empty View in Marionette CompositeView

backbone.jsmarionette

I'm using a Marionette CompositeView to render an html table. Works great! Now I want to display a message when there are no records in the collection. I'm currently using the emptyView property to render this message. However, the message is rendered in the table wrapper and the tables column headers are still visible. Not exactly what I want. Ideally, I would like to hide/remove the table and display the empty records view and then show it when records are added. I'm struggling to find to best approach to handling this. Are there any suggestions out there?

EmptyView = Marionette.ItemView.extend({
template: "#empty-template"
});

SupportMemberView = Marionette.ItemView.extend({
template: "#member-template"
});

SupportTeamView = Marionette.CompositeView.extend({
template: "#support-team-template",
itemView: SupportMemberView,
emptyView: EmptyView,
itemViewContainer: 'tbody'
});

Best Solution

The accepted answer imposes a dependency between the empty view and the template, which does not feel right.

I think an alternative way to do this is to use dynamic templates in the composite view. This is done by overriding the base View getTemplate() method. Thus your composite view would be defined as follows, assuming you have access to the underscore.js library or equivalent to replace the "_.isEmpty()" function:

SupportTeamView = Marionette.CompositeView.extend({
getTemplate: function() {
  if (_.isEmpty(this.collection)) {
       return "#empty-template"
  } else {
       return "#support-team-template";
  }
itemView: SupportMemberView,
emptyView: EmptyView,
itemViewContainer: 'tbody'
});
Related Question