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

Salinasalinas

Can you post some code? – Churchgoer

Answer 1

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.

Timorous

I was starting to look at that option but thought since I'm new to Backbone/Marionette I would ask and see if there was something I was missing. – Salinasalinas

i think is a valid scenario and I think the reason of that function is for this kind of needs. – Timorous

Answer 2

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

Maker

The problem with your idea is getTemplate is called only once, and you bind it to a dynamic thing - the collection's content. So this idea would be stuck on the fact the collection will never change. – Billionaire