Display Empty View in Marionette CompositeView

Question

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'
});

Answer 1

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'
});

Answer 2

One thing that you can do is on your emprty View use the onRender function to hide the table. this function is called after the render function, so you will be able to manipulate the dom to look the way you want.