Introduction to Spacebars Template Tags Meteor JS
Feb 13 2015 06:42pm | | Share

Introduction to Spacebars Template Tags Meteor JS

By Ronak Nagda

Spacebars is Meteor’s templating language inspired by Handlebars. It shares the same syntax as Handlebars, but it has been customized to include a few specific features of its own.

Spacebars templates include HTML tags mixed with template tags- which are written within double curly braces {{ }}. Let’s look at a quick example below to see what a Spacebars Template looks like and to understand the different types of Spacebars template tags.

Spacebars Code Snippet

The above example illustrates a basic HTML page in Meteor. It typically consists of a Head section, a Body section and a Template section. Within the body tag you could see regular HTML tailored together with some Spacebars template tags. Let’s have a look at the 4 main types of template tags:

1.    {{> pageBody}}
Inclusion template tags, double curly braces followed by ‘>’ (greater than) sign, means insertion of a Spacebars Template within a block of code. In this case, ‘pageBody’ refers to the template name used to include block of code within the body.

2.    {{pageHeader}}
These double-curly braced template tags are generally used to insert content within your page. {{pageHeader}} most-likely relies on template helper functions to receive its value.

3.    {{#each}}
Block template tags, double curly braces followed by ‘#’ sign, are used to include a block of code within your page based on certain conditions. In this case, the {{#each}} is a built in tag that will iterate over the objects of an array providing the details of the array data. Please Note: In this case {{title}} and {{content}} refer to the properties of the current array object. But alternatively they could rely on template helpers to receive data depending upon the way you code.

Other built-in block template tags include {{#if}}, {{#with}}, {{#unless}}. It is also possible to define your own custom block template tags.

4.    {{{custom}}}
Triple-curly braced template tags {{{…}}} are used to include raw HTML within your page. You should use these tags cautiously and make sure the HTML content here is safe and free from syntax errors.

This pretty much summarizes the Spacebars template tags.
Using Spacebars, you can pass arguments to the templates or template’s helper functions, define global helpers, pass attributes to HTML using template helpers and do a few more cool things. To learn more and to watch a Spacebars Demo in action, please watch my Video at http://youtu.be/YhsXFfFnsao

You could also refer to the Spacebars Github page to read more about Spacebars.

Checkout the Meteor training course offered by DEV6.

References: Spacebars Github page