Integrate Handlebars with Marionette
If you need to use Handlebars with Marionette then today is your luck day! I’ve got just what your looking for. This first attempts to load pre-compiled templates, then by selector, and finally via XHR.
To customize the file extension and location of your templates when loading via XHR just override Marionette.Handlebars
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
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)); |