Platinum Partner
css,html5,javascript,tips and tricks,handlebars,handlebars.js,web templating framework

Handlebars.js in a Nutshell

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

{{ tag }}, {{tag}},

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

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}