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 Work?|
- 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
- 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
How to Load/Add Templates1. In-lined Templates using <script> tag
<script id="Handlebars-Template" type="text/x-handlebars-template">
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