Templates

To combine data and html we use a template engine.

Templating using Handlebars example

We will be using handlebars as our template engine, it combines data with templates to render information.

A typical handlebars template look likes this

<div class="entry">
  {{#if author}}
    <h1> {{firstName}} {{lastName}}</h1>
  {{/if}}
</div>

You can combe the above template with this data:

var user = {
 author : true,
 firstName : "Jo",
 lastName : "Blogss"
};

like this:

var templateString = document.querySelector('.entry').innerHTML;

var templateInstance = Handlebars.compile(templateString);

var html = templateInstance(user);

results in this html:

<div class="entry">
    <h1>Joe Bloggs</h1>
</div>

Note that you need to reference the Handlebars library. You can use a link to cdnjs.org like this

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script>

Templating using Handlebars

HandlebarsJS is built on top of Mustache templating engine and extends it. Mustache templating aims to be logic-less templating, but that make Mustache hard to use at times.

Read more on the Mustache website.

Read here about what are the differences between Mustache.js and Handlebars.js?

Handlebars helpers

Handlebars comes with a set of built in helpers that makes it easy for one to process data and convert it into a layout. It supports things like if statements and loops.