Skip to content

Instantly share code, notes, and snippets.

@hugolpz

hugolpz/README.md

Last active October 30, 2023 22:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hugolpz/8075193 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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 Handlebars.js ?

JS templating systems are at the core of recent easy web developpement. Templating is especially relevant for cross platform design, limited by the smallest potential devices and requiring more simplicity. These websites and webapps typically use the design method of vertical stacking. Structurally identical elements (usually <div>s) are stacked vertically under each other with custom content from data : local .json file, localStorage's json data, online API, etc.
Handlebars.js {{syntax}} simplify the design of HTML structure and CSS style designs to the design of one single example element : the template. Yet, Handlebars.js keeps the possibility of more complex schemes, thus being the perfect JS templating library.

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

    index.html Minimal HTML5-MustacheJS 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 * CDNjs.com * The Protocol-relative URL * A JSON Tutorial. Getting started with JSON using JavaScript and jQuery
    • Raw
    Blog.txt
    == How to use Templating System: Handlebars.js
    === Why Handlebars.js
    <b>Mustache.js</b> HTML templating system have been designed to stays extremly simple. As such, it excludes logical operators (IF) and alikes.
    <b>Handlebars.js</b> 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. The documentations with just be longer to read.
    In this page, we will cover the basics of Handlebars.js.
    </h3>Minimal HTML5-MustacheJS : index.html</h3>
    <h3>Minimal HTML5/HandlebarsJS file</h3>
    index.html
    <h3>Minimal JSON: data.json</h3>
    data.json
    <h3>Sources:</h3>
    * <a href="http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/">Introduction to JavaScript Templating [video tutorial] with Mustache.js</a>
    * <a href="http://cdnjs.com">CDNjs.com</a>
    * <a href="http://www.paulirish.com/2010/the-protocol-relative-url/">The Protocol-relative URL</a>
    * <a href="http://iviewsource.com/codingtutorials/getting-started-with-javascript-object-notation-json-for-absolute-beginners/">A JSON Tutorial. Getting started with JSON using JavaScript and jQuery</a>
    NEXT:
    http://h5bp.github.io/
    http://jsfiddle.net/YGwJ9/1/
    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