Skip to content

Instantly share code, notes, and snippets.

@funkjedi
Last active April 5, 2024 14:29
Show Gist options
  • Save funkjedi/5732611 to your computer and use it in GitHub Desktop.
Save funkjedi/5732611 to your computer and use it in GitHub Desktop.
Integrates Handlebars with Marionette. First attempts to load pre-compiled templates, then by selector, and finally via XHR.
/**
Usage: Just include this script after Marionette and Handlebars loading
IF you use require.js add script to shim and describe it in the requirements
*/
(function(Handlebars, Marionette) {
Marionette.Handlebars = {
path: 'templates/',
extension: '.handlebars'
};
Marionette.TemplateCache.prototype.load = function() {
if (this.compiledTemplate) {
return this.compiledTemplate;
}
if (Handlebars.templates && Handlebars.templates[this.templateId]) {
this.compiledTemplate = Handlebars.templates[this.templateId];
}
else {
var template = this.loadTemplate(this.templateId);
this.compiledTemplate = this.compileTemplate(template);
}
return this.compiledTemplate;
};
Marionette.TemplateCache.prototype.loadTemplate = function(templateId) {
var template, templateUrl;
try {
template = Marionette.$(templateId).html();
}
catch (e) {}
if (!template || template.length === 0) {
templateUrl = Marionette.Handlebars.path + templateId + Marionette.Handlebars.extension;
Marionette.$.ajax({
url: templateUrl,
success: function(data) {
template = data;
},
async: false
});
if (!template || template.length === 0){
throw "NoTemplateError - Could not find template: '" + templateUrl + "'";
}
}
return template;
};
Marionette.TemplateCache.prototype.compileTemplate = function(rawTemplate) {
return Handlebars.compile(rawTemplate);
};
}(Handlebars, Marionette));
@chollier
Copy link

Hi ! Thanks for sharing this piece of code :)

Could show an example of how to use then the template ?

@sashasimkin
Copy link

@choiler There is my gist with one fix and small description which might help you
https://gist.github.com/sashasimkin/5876792

@hashchange
Copy link

Thanks for this! I've been using it for a while. Marionette 2.0 has broken it, though. Marionette.$ is no longer with us, but replacing it with Backbone.$ does the job. I've just forked and fixed it, feel free to help yourself :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment