Uncaught TypeError with Handlebars.js

Question

I am using Handlebars.js with precompiled templates. I have the following code (using JQuery in the first line):

$('#'+id).append('<script src="'+widgetContext.templateDir+
                                             template+'.tmpl">');
console.log(Handlebars);
console.log(Handlebars.templates);                                       
var html = Handlebars.templates[template](data);

I get the following at the console:

The 'widget_container' template file definitely exists in the location specified. I've also tried with both the standard handelbars.js and handelbars.runtime.js.

Any idea what is going on here or how to fix the error?

Update: it appears to work if the HTML is on the same domain as the javascript file and templates but not if it isn't, so something to do with the same origin policy? I'm trying the handlebars require.js plugin here https://github.com/SlexAxton/require-handlebars-plugin but having problems getting it working.

Answer 1

I solved this using:

• The text plugin for require.js and loading the handlebars templates as text files
• The optimizeAllPluginResources build option for r.js
• Getting a very recently updated version of require.js/r.js which fixed a bug with the optimizeAllPluginResources build option
• A rather horrible use of eval to run the template file code - would still be nice to avoid this

Still not quite sure exactly what was going on with the undefined Handlebars.templates though.