Minimal HandlebarsJS Demo

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 :

|-index.html: Minimal HandlebarsJS demo within a minimal HTML5 page,
(with external jquery & handlebars)

|-data.json : example of data

|-style.css : non-critical css.

Minimal HTML5/HandlebarsJS file

See: index.html

Minimal JSON: data.json

See asset: data.json for a concise example.

Sources

* Introduction to JavaScript Templating [video tutorial] with Mustache.js * A JSON Tutorial. Getting started with JSON using JavaScript and jQuery * CDNjs.com * The Protocol-relative URL

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Concise Handlebars.js</title>
    
    <link rel="stylesheet" href="style.css">
 
    
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
  </head>
 
  <body>
    
    <script>
    var url='data.json'; // relative url : 'data.json'; protocole-relative absolute url: '//website.org/path/to/data.json';
    </script>
 
    
    <div id="anchor">This div is the <b>#anchor</b>.</div>
 
    
    <script id="tpl" type="text/template">
        {{#people}}
            <div><img src="{{photo}}"><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
        {{/people}}
    </script>
 
    
    <script>
    //4a.function creation
    var slingshot = function (url, tplId, anchor) {
     $.getJSON(url, function(data) {
              var template = $(tplId).html();
              var stone = Handlebars.compile(template)(data);
              $(anchor).append(stone);
     });
  }
    //4b.function firing
    slingshot('data.json', '#tpl', '#anchor'); // since url = 'data.json' , we can use both notations.
    </script>
  </body>
</html>

https://code.jquery.com/jquery-2.0.3.min.js

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js