How to define Handlebar.js templates in an external file - templates

Question

I am currently defining my Handlebars templates within the same HTML file in which they will be used.
Is it possible to define them as external templates, which can be called when the page is loaded?

Answer 1

For those that get here through Google search like I did, I finally found the perfect answer in this post, check it out :
http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro
Basically you need to implement a method, getTemplate :
Handlebars.getTemplate = function(name) {
if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
$.ajax({
url : 'templatesfolder/' + name + '.handlebars',
success : function(data) {
if (Handlebars.templates === undefined) {
Handlebars.templates = {};
}
Handlebars.templates[name] = Handlebars.compile(data);
},
async : false
});
}
return Handlebars.templates[name];
};
and then call your template with it :
var compiledTemplate = Handlebars.getTemplate('hello');
var html = compiledTemplate({ name : 'World' });
That way, if you precompiled the templates (great for production use) it will find it directly, otherwise it will fetch the template and compile it in the browser (that's how you work in development).

Answer 2

You can use AJX to load them.
Here's an example function which accepts a URL to a Handlebars template, and a callback function. The function loads the template, and calls the callback function with the compiled Handlebars template as a parameter:
function loadHandlebarsTemplate(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var raw = xhr.responseText;
var compiled = Handlebars.compile(raw);
callback(compiled);
}
};
xhr.send();
}
For example, assume you have a Handlebars template defined in a file named /templates/MyTemplate.html, such as:
<p>The current date is {{date}}</p>
You can then load that file, compile it and render it to the UI, like this:
var url = '/templates/MyTemplate.html';
loadHandlebarsTemplate(url, function(template) {
$('#container').html(template({date: new Date()}));
});
An even better solution, would be to pre-compile the templates which would speed up the time they take to load. More info on precompilation can be found here.

Answer 3

Edited solution from Jeremy Belolo for working more templates in directories, if i do not want to have all templates in templates directory.
Handlebars.getTemplate = function(name, dir) {
if (dir === undefined) //dir is optional
dir = "";
if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
$.ajax({
url : 'templates/' + dir+'/' + name, //Path, dir is optional
success : function(data) {
if (Handlebars.templates === undefined) {
Handlebars.templates = {};
}
if (Handlebars.templates[dir] === undefined) {
Handlebars.templates[dir] = {};
}
if (dir === undefined)
Handlebars.templates[name] = Handlebars.compile(data);
else
Handlebars.templates[dir][name] = Handlebars.compile(data);
},
async : false
});
}
if (dir === undefined)
return Handlebars.templates[name];
else
return Handlebars.templates[dir][name];
};

Answer 4

Using async: false; is far away from being the perfect solution. With jQuery in your toolbox, just make use of $.Deferred.
I came up with this solution:
;(function ($, Handlebars) {
'use strict';
var namespace = window,
pluginName = 'TemplateEngine';
var TemplateEngine = function TemplateEngine(options) {
if(!(this instanceof TemplateEngine)) {
return new TemplateEngine(options);
}
this.settings = $.extend({}, TemplateEngine.Defaults, options);
this._storage = {};
return this;
};
TemplateEngine.Defaults = {
templateDir: './tpl/',
templateExt: '.tpl'
};
TemplateEngine.prototype = {
constructor: TemplateEngine,
load: function(name, $deferred) {
var self = this;
$deferred = $deferred || $.Deferred();
if(self.isCached(name)) {
$deferred.resolve(self._storage[name]);
} else {
$.ajax(self.urlFor(name)).done(function(raw) {
self.store(name, raw);
self.load(name, $deferred);
});
}
return $deferred.promise();
},
fetch: function(name) {
var self = this;
$.ajax(self.urlFor(name)).done(function(raw) {
self.store(name, raw);
});
},
isCached: function(name) {
return !!this._storage[name];
},
store: function(name, raw) {
this._storage[name] = Handlebars.compile(raw);
},
urlFor: function(name) {
return (this.settings.templateDir + name + this.settings.templateExt);
}
};
window[pluginName] = TemplateEngine;
})(jQuery, Handlebars);