Handlebars — the JavaScript templating system

XpertLab – Android application development in Junagadh

While working and learning on my busy day with coding & developments, Today I have learned templating system called Handlebars.js and I am going to share a Beginner’s Guide and an Introduction to Handlebars.

There is a continuous need to update the data rendered on the browser, the majority of the web consists of dynamic applications in which the data keep changing frequently. So template engines and templating systems are very useful and help developers to build semantic templates in your HTML that work along with JavaScript to quickly render a lot of HTML with just a little bit of code.

Handlebars.js is a popular templating engine that is powerful, simple to use. It is based on the Mustache(as their logo and design states) template language. With Handlebars, you can separate the generation of HTML from the rest of your JavaScript and write cleaner code.

The basic building block of Handlebars is an expression. Expressions are noted in the ‘Mustache’ syntax of ‘{{ }}’ and Logic-less templates. we can say that Handlebars is a superset of Mustache.

In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates. Complete details can be found here.

Handlebars can be loaded into the browser just like any other JavaScript file:

<script src=”/path/to/handlebars.min.js”></script>

XpertLab – Android application development in Junagadh

or

<script src=”//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js”></script>

There are many different ways to install and use Handlebars, the following are some of the more popular.

NPM

Handlebar’s npm package includes both libraries suitable for CommonJS aware systems and built browser libraries that can be consumed direct browser mechanisms.

npm install –save handlebars

Require-aware systems such as Node and Webpack can then load via:

require(‘handlebars’);

or for the run-time only:

require(‘handlebars/runtime’);

Bower

Handlebars maintains a as well that is available for bower users. This can be installed in a project like so.

bower install –save handlebars

CDNs

Handlebars is hosted on a number of free CDNs as well.

• cdnjs
• jsDelivr. Advanced usage, such as version aliasing & concocting, is available.

Start your first Demo with Handlebars like this:

There are just a few steps necessary to get things up and running with Handlebars. First, you must create your template in the HTML file. This is created in a standard <script> tag and is a combination of HTML and Handlebar expressions. The template can have any id that you want but the type must be “text/x-handlebars-template” otherwise the script tag will be rendered as JavaScript.

In this example, I’ve created the ‘handlebars-demo’ template and added some HTML and a four Handlebar expressions.

Now put the necessary JavaScript code blocks to render and append templating handler for Handlebars.

https://xpertlab.com/wp-content/uploads/2021/06/xpertlab-javascript-handlers-1-1024×455.png

After the template has been retrieved, we can compile it by using the Handlebars.compile() method which returns a function. This function is then executed by passing the context as an argument. When the execution is complete, the function returns the desired HTML with all the variables replaced by their corresponding values. At this point we can inject the HTML into our web page.

Output after rendering templates into HTML using Handlebars:

XpertLab – Android application development in Junagadh