The basics of Handlebars

Handlebars is a really simple and easy-to-use templating framework. It works on the principle of interpolation of data within the template. To get an overview of Handlebars, consider the following block diagram:

Here, the compile method accepts the HTML expression templates and results in a function with a parameter.

Let's go through and explore the basic syntax of writing a Handlebars template.

Binding an object to the template

Let's assume that the following JavaScript object is passed to a Handlebars template:

    let context = { 
      name: 'World' 
    }; 

The template file itself will contain the following markup:

    let source = `<div> 
      Hello {{ name }}! 
    </div>` 

The preceding markup contains name as the HTML expression that will be interpolated by its context object.

We need to write the JavaScript method that makes it work, as follows:

    let template = Handlebars.compile(source);
    let output = template(context);

This output variable will...