public

synchronous and asynchronous loading of handlebars templates

  • Download Gist
Sync_Async_loading_handlebars.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
/*
* This decorates Handlebars.js with the ability to load
* templates from an external source, with light caching.
*
* To render a template, pass a closure that will receive the
* template as a function parameter, eg,
* T.render('templateName', function(t) {
* $('#somediv').html( t() );
* });
* Source: https://github.com/wycats/handlebars.js/issues/82
*/
var Template = function() {
this.cached = {};
};
var T = new Template();
$.extend(Template.prototype, {
render: function(name, callback) {
if (T.isCached(name)) {
callback(T.cached[name]);
} else {
$.get(T.urlFor(name), function(raw) {
T.store(name, raw);
T.render(name, callback);
});
}
},
renderSync: function(name, callback) {
if (!T.isCached(name)) {
T.fetch(name);
}
T.render(name, callback);
},
prefetch: function(name) {
$.get(T.urlFor(name), function(raw) {
T.store(name, raw);
});
},
fetch: function(name) {
// synchronous, for those times when you need it.
if (! T.isCached(name)) {
var raw = $.ajax({'url': T.urlFor(name), 'async': false}).responseText;
T.store(name, raw);
}
},
isCached: function(name) {
return !!T.cached[name];
},
store: function(name, raw) {
T.cached[name] = Handlebars.compile(raw);
},
urlFor: function(name) {
return "/resources/templates/"+ name + ".handlebars";
}
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.