Over a million developers have joined DZone.

Handlebars.js in a Nutshell

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Handlebars Overview

Handlebars.js is a logic-less semantic web template framework.  The 3 main parts of Handlebars are Handlebars template, data/context in JSON format and Handlebars compile function.

How Handlebars Works?

Handlebars Syntax/Features

  • Expressions - are the basic unit of Handlebars template representing property in the data/context.  
  • Built-In Block Helpers - are the conditionals and loops for executing logic
  • Custom Helpers - are user defined JavaScript functions to manipulate/process the data  and implement any kind of complex logic.
  • Path -  A path is a property lookup. Nested paths to lookup property of the current data/context and Parent path ../ to lookup property on parent of the current data/context.
  • Partials (sub templates) - To render a section of a template marked with "partial name" within a larger template, with another template.
  • Pre-compilation – Saves time on the client and reduces run-time size of the Handlebars.js library

When to use a Handlebars.js Templating Engine?

  • Application’s view will be updated frequently, especially as a result of changes to the data either from the server or the client
  • Multiple technology stacks that depend on the same data (server)
  • When the application has much interactivity and it is very responsive
  • To develop a single-page web application with multiple views
  • To easily manage HTML content; you don’t want your JavaScript code to contain important HTML markup

How to Load/Add Templates

1. In-lined Templates using <script> tag

<script id="template" type="text/x-handlebars-template">
</script>


2. Externalized Templates

Storing templates in files and retrieve them using Require.js
Storing templates in DB and  retrieve them using RESTful interface through Ajax calls

References

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}