Handlebars.js is a convenient, easy to learn JS templating system. In this page, we will cover the basics of Handlebars.js.
What is Handlebars.js ?
Mustache.js HTML templates system have been designed to stays extremly simple, on purpose restricted to structure only (logic-less templating). As such, it excludes logical operators (IF) and alikes.Handlebars.js HTML templates are based on Mustache.js, so you can start little and simple. Handlebars.js also have logical and advanced operators so you can later build more complex and conditional stuffs. In this 2nd logic-full level, the HTML-CSS designer of the template will need some basic coding concepts, such FOR LOOPS, IF (conditional), and few others fundamentals. The documentations will there be about 3 A4 pages long.
Why use JS templating ?
JS templating systems are at the core of recent web developpement simplifications. Limited by the smallest potential mobile devices of visitors/users/customers and requiring more simplicity, recent cross platforms websites and webapps typically use the design method of stacking. Structurally identical basic elements (usually <div>s) are stacked vertically under each other, each with custom contents from its data source : a local .json file, a JS localStorage variable with json data, online API's json output, etc.Emails services such google are a good example of a stable frame with data driven stacking for the main/central/dynamic area.
Handlebars.js {{syntax}} simplify the design of HTML structure and CSS style to the design of one single example element : the template. Yet, Handlebars.js keeps the possibility of more complex schemes, this easiness to learn with scalability make Handlebars.js a JS templating of choice for fast and clean developements.
Project tree
For self use and the community, this gist contains an handy :(with external jquery & handlebars)
Minimal HTML5/HandlebarsJS file
See:index.html
Minimal JSON: data.json
See asset:data.json for a concise example.