Skip to content

Instantly share code, notes, and snippets.

@hugolpz

hugolpz/README.md

Last active October 30, 2023 22:30
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save hugolpz/8075193 to your computer and use it in GitHub Desktop.
Save hugolpz/8075193 to your computer and use it in GitHub Desktop.
Download ZIP
Minimal HandlebarsJS Demo
Raw
README.md

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
    • Raw
    data.json
    { "people":
    [
    {
    "family": "Lopez",
    "name": "Hugo",
    "title": "leader",
    "place": "Paris (France)",
    "introduction": "WP:Map workshop's Dino, GIS, Gdal & D3js lightener",
    "photo": "WikiAtlas_Lopez_Hugo_Yug.png",
    "twitter": "http://www.twitter.com/Hugo_lz"
    },
    {
    "family": "Ganesh",
    "name": "Arun",
    "title": "co-leader",
    "place": "Dharamsala (India)",
    "introduction": "GIS, D3js enthusiast, interactions designers & wikidata tinker",
    "photo": "WikiAtlas_Ganesh_Arun_Planemad.jpg",
    "twitter": "http://www.twitter.com/planemad"
    },
    {
    "family": "Lopez",
    "name": "Edouard",
    "title": "Hero",
    "place": "Bordeaux (France)",
    "introduction": "Backend admin & Frontend professional webdev, scripts & stack consulting",
    "photo": "WikiAtlas_Lopez_Edouard_Lyhana8.png",
    "twitter": "http://wwww.twitter.com/edouard_lopez"
    }
    ]
    }
    Raw
    index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Concise Handlebars.js</title>
    <!-- 0a. CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- 0a. JS -->
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script><!-- online jquery.js -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script><!-- online handlebars.js-->
    </head>
    <body>
    <!--1. Data (json format!) -->
    <script>
    var url='data.json'; // relative url : 'data.json'; protocole-relative absolute url: '//website.org/path/to/data.json';
    </script>
    <!-- 2. Anchor -->
    <div id="anchor">This div is the <b>#anchor</b>.</div>
    <!-- 3. Template -->
    <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>
    <!--4. Handlebars.js slingshot -->
    <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>
    Raw
    style.css
    img { width:200px; }
    a {
    color: #0084b4;
    text-decoration:none;
    }
    a:hover { text-decoration : underline; }
    div#anchor { width: 230px; }
    div#anchor:hover {
    padding: 12px; /* padding + border = 16px */
    border: 4px solid #ddd;
    }
    div {
    display: block; /* or inline-block */
    overflow: hidden;
    /*height: 200px; */
    width: 200px;
    margin: 3px;
    padding: 15px; /* padding + border = 16px */
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    background: #fff;
    color: #333;
    }
    div:hover {
    padding: 12px; /* padding + border = 16px */
    border: 4px solid #0084b4;
    }
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment