Creating dynamic lists

The Meteor Spacebars syntax supports the rapid development of lists, tables, and other displays of data through the use of template block tags. Used within templates, block tags can quickly add dynamic lists and even customize the look and feel of each element, based on its unique attributes. This recipe will show you how to use the #each block tag to display multiple elements of a collection inside a Blaze template.

Getting ready

We will use the code from the Inserting templates with Spacebars recipe, found in this chapter, as our baseline project.

If you haven't already done so, create and save a new file in your [project root]/client folder called templates.js.

Create and save a new file in your [project root]/both folder called collections.js.

We will want to make one modification to the HTML in the templates.html file. We will change the height of our <svg> element from 200 to 800:

<svg height="800" width="100%" id="shapes">

Finally, we want to add the random...