Spacebars: How to handle an empty data container when iterating with #each

/ Chris Nielsen

In a Meteor project, when using Blaze (Spacebars) to set up iteration through a data container in an HTML template, the normal pattern is to use an ‘each’ block. For example:

{{ #each dataContainer }}
   ... HTML tags here ...
   ... HTML tags here ...
{{ /each }}

An each block starts with #each and ends with /each. What it does is iterate through every row or element in the dataContainer to produce the block of HTML code for every row. For example, if you have a list of quotes in the data container and you want to output each with some HTML/CSS formatting:

{{ #each listOfQuotes }}
   <h1 class"bold"><i>{{ quote }}</i></h1>
{{ /each }}

Let’s say your data container is populated with either a Mongo DB collection or MySQL query. It is possible that the container could come back empty for a particular user. In this case, we can use an {{ else }} in our each block to provide some alternate output for the case of no query results being returned. For example:

{{ #each listOfQuotes }}
   <h1 class"bold"><i>{{ quote }}</i></h1>
   {{ else }}
   No quotes found. 
{{ /each }}

This is a convenient shortcut to handling the empty container, so that we don’t have to deal with it in our Meteor.template.helper function.

For more information about Blaze and its use of Spacebars, see:
http://blazejs.org/guide/introduction.html
http://blazejs.org/guide/spacebars.html
http://blazejs.org/api/spacebars.html