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 Work? |
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="Handlebars-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
http://handlebarsjs.comhttp://javascriptissexy.com/handlebars-js-tutorial-learn-everything-about-handlebars-js-javascript-templating/