Ungerboeck Digital - Blog

Blog

 

Handlebar Mustaches - Templates Done Right

Kevin Zink
Sep 29, 2016
JSON templates

First, I mustache you a question or three.

Do you use RESTful services? Of course you do. Do your services output JSON. Ummmm... sometimes. Do you know one of the simplest methods to render your data into a webpage. Maybe.

Well, hold onto your Handlebars as this is going to be a quick ride.

More often than not, a decent web service will provide JSON as the standard output. This began because it was convenient and worked well with JavaScript... because... well because it IS JavaScript. Because of the simplicity in parsing the results, this output gained ground quickly and is what many developers deal with today.

As stated, JSON is JavaScript that is intended for lightweight, data-interchange. PJSON (Prettified JSON) is simply the human readable format of this output. This acronym is less used as there are any number of plugins and readers that will reformat any valid JSON output into a nicely tabbed structure. Once you have the data, what is a quick technique to get it into your site?

Enter Mustache

Mustache is a "logic-less" template system. "Logic-less?," you ask. Yes. Mustache has no explicit control flow statements. All output is controlled by the data that is fed within the system. Simply placing content references, directly within your script/html, allows Mustache to replace those regions with the desired content.

Each content reference is embraced by curly braces resembling mustaches (turned on their side, of course, as the web is wont to do).

Hello {{world}}

This example would simply replace world with the value of "world" as supplied within the JSON results.

Basic conditionals and loops are straightforward as well.

{{#users}}
    Do this for each user.
{{/users}}

Each template can utilize html, script, etc. directly inline.

Sample JSON Object

{
    "name": "Kevin",
    "position": "Technology Lead",
    "company": "Ungerboeck Software International"
}

Sample Mustache template

{{name}} - {{position}} - {{company}}

Output

Kevin - Technology Lead - Ungerboeck Software International

To take this a bit further, we can loop through items while adding a bit more HTML.

Sample JSON Object

{
    "employees":[
        {"name":"Rebecca", "position":"Director", "company":"Ungerboeck Software International"}, 
        {"name":"Kevin", "position":"Technology Lead", "company":"Ungerboeck Software International"}
    ]
}

Sample Mustache template

{{#employees}}
    <h2>{{name}}</h2>
    <div class="position">{{position}}</div>
    <div class="company">{{company}}</div>
{{/employees}}

Output

<h2>Rebecca</h2>
<div class="position">Director</div>
<div class="company">Ungerboeck Software International</div>
<h2>Kevin</h2>
<div class="position">Technology Lead</div>
<div class="company">Ungerboeck Software International</div>


How to make your Mustache even better? Handlebars, of course.
Handlebars is like regular Mustache but a bit fancier. Handlebars works, basically, off of the existing Mustache implementation but includes compiled templates, logic (unless, with, each, if, inversions), helpers (functions), paths, and speed (5-7 times quicker rendering when compiled).

Rather than getting into too many details, I will direct you towards the Handlebars site. If you're ready to jump in, give your sample code a try at: http://tryhandlebarsjs.com/

I will, however, leave you with a bit of custom code that will make your life with Handlebars a bit more straight-forward. Rather than embedding the template within the code, the following custom function can be called. This function will accept the path to your (valid) JSON output, the path to your Handlebars template, and the location to which the results of the JSON/Template should be rendered.

/*****BEGIN DISPLAY DATA*****/
function displayData(dataPath,templatePath,renderLocation){
    jQuery.ajax({
        url: dataPath,
        success: function (data) {
            jQuery.get(templatePath, function(template) {
                var rendered = Handlebars.compile(template);
                var result = rendered(data);
                jQuery(renderLocation).html(result);
            });
        },
        error: function (xhr, status) {
            /*Error reading data*/
        }
    });
}
/*****END DISPLAY DATA*****/

/*****BEGIN SAMPLE CALL*****/
displayData("PATH TO JSON FILE","PATH TO HANDLEBARS TEMPLATE",".RENDERLOCATION");
/*****END SAMPLE CALL*****/

 

Let's Talk

Looking to know more? Drop us a note through the form below.

636.300.5606  |  100 Ungerboeck Park, O'Fallon, Missouri, 63368
Godzilla