#handlebarsjs

Over the past few weeks we've been working on a web project that collects a organizes all of the visual depictions of World War 2 and lists them on a timeline.

Using Handlebars.js, the site grabs JSON data from a Google Sheet and generates entries for the timeline. The page itself is styled using Bootstrap and jQuery, both of which provided invaluable resources for the unique needs of this type of website.

The site continues to be in a beta state while we make more improvements and get more entries, but you can see our progress @ http://zion.tgp.io/staging/ww2

So, I discovered Handlebars partials can work not only as globals, but also be defined at template run time, like such:

var html = myTemplate({ firstname: 'John' }, {partials: {myPartial: Handlebars.compile('Hello {{firstname}}') } } );

After a server move we started encountering errors after precompiling our handlebars templates.  Googling didn't help much but after playing around with various versions of the compiler and runtime (both of ours were old on the older server) it seems like using runtime 1.0.0 with the older 1.0.11 version of the handlebars CLI compiler works.

Installing older version of compiler via NPM:

$ npm install [email protected] -g

I recently discovered handlebars, a javascript template framework. If you take a look at the tutorials on the website itself you will notice that all of the tutorials focus on declaring your templates in <script> tags.

The project itself does not support remote templates, unless you have them precompiled...

This very brief guide is to illustrate to you how you would automatically load and compile remote templates using jQuery.

First create a template called post.handlebars (or whatever else you decide) and insert the following code:

<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div>

Next add the following line into your main html file (e.g. index.html):

<link rel="prefetch" type="application/x-handlebars-template" src="handlebars/post.handlebars" data-template="post" />

Next add the following javascript to your markup (or separate javascript file). Remember it's usually better to add the markup at the bottom of your body.

var handleBarsTemplates = {};

$(function($) {

$("link[type='application/x-handlebars-template']").each(function() {

var url = $(this).attr("href");

var templateName = $(this).data('template');

$.get(url, function(data) {

var template = Handlebars.compile(data);

handleBarsTemplates[templateName] = template;

});

});

});

You can access the templates by using the following javascript:

handleBarsTemplates.post({title: "Easy Handlebars", body: "This was really simple wans't it"});