Take the 2-minute tour ×

I have a CompositeView where I fetch its collection on initialize.

  initialize: function() {
    this.collection = this.model.things;

How do I not render this composite view if its collection is empty?

I'm aware of the EmptyView, but that still renders the composite view's template. I want to not render anything if the collection is empty.

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

The answer ended up being to render the composite view after the fetch's deferred objected returned.

initialize: function() {
  var self = this;
  this.collection = this.model.localFoods;
  this.collection.fetch().then(function() {

Current score

async:23, me:0

Async wins!

share|improve this answer
I have the same problem. Instead of fetching I check for the size of the collection and only render if it's > 1. But it is getting rendered regardless of whether I call render() or not. And also it is complaining that object has no method render when I use self. (I've been using this). Any help there? –  Swamy g Sep 6 '13 at 21:16
add comment

From the Docs:

When the collection's "reset" event is fired, it will only re-render the collection within the composite, and not the wrapper template

So pass {reset: true} to the fetch(), so the collection will automatically be re-rendered:

initialize: function() {
    this.collection = this.model.things;
    this.collection.fetch({reset: true});
share|improve this answer
add comment

Your Answer


