Menu
I'm new to RequireJS and trying to load handlebars precompiled templates with RequireJS. It load the handlebars template and runtime but Handlebars runtime was undefined.
Folders structure
www
|__index.html
|__js
|__main.js
|__lib
| |__jquery-1.10.1.min.js
| |__handlebars.runtime-v1.1.2.js
| |__require.js
|__modules
| |__content.js
|__templates
|__content-tmpl.js //handlebars precompiled template
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/lib/require.js" data-main="js/main"></script>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
</body>
</html>
main.js
requirejs.config({
paths:{
jquery:'lib/jquery-1.10.1.min',
'handlebars.runtime':'lib/handlebars.runtime-v1.1.2'
}
});
requirejs(['modules/content','jquery'],function (content,$) {
$(function(){
content.initModule();
});
});
content.js
define(['jquery','../templates/content-tmpl'],function($,template){
return{
initModule:function(){
$('body').append(template());
}
}
});
content-tmpl.js (Compiled Handlebars template)
define(['handlebars.runtime'], function (Handlebars) {
//Error raise here. Handlebars is undefined.
Handlebars = Handlebars["default"];
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
return templates['content'] = template(function (Handlebars, depth0, helpers, partials, data) {
this.compilerInfo = [4, '>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers);
data = data || {};
return "<div>\r\n Hello Handlebars and RequireJS\r\n</div>";
});
});
Console Error
TypeError: Cannot read property 'default' of undefined
480
My guess is that handlebars.runtime.js is not an AMD module, so you need to configure it using shim config. In your require.js config add
requirejs.config({
shim: {
"handlebars.runtime": {
exports: "Handlebars"
}
}
});
This way, when you call require("handlebars.runtime"), require.js will know to grab window.Handlebars variable and pass it to you after the script has loaded.
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
