Geek Answers Handbook

How to load the Handlebars workspace using RequireJS

I'm new to RequireJS and trying to download pre-compiled handlebars templates with RequireJS. It loads the rudder pattern and runtime, but the Handlebars runtime was undefined.

Folder 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
+7
javascript requirejs
source share
2 answers

I assume that handlebars.runtime.js not an AMD module, so you need to configure it using the shim configuration. In your require.js add file

 requirejs.config({ shim: { "handlebars.runtime": { exports: "Handlebars" } } });

That way, when you call require("handlebars.runtime") , require.js will know to capture the window.Handlebars variable and pass it to you after the script loads.

+2
source share

If you are using RequireJS, you must include the AMD runtime version, in which case export is not required.

 require.config({ paths: { 'handlebars.runtime': '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.runtime.amd.min' } });

Then, when you want to access the Handlebars object (for example, to register an assistant).

 require(['handlebars.runtime'], function(HandlebarsRuntime) { var Handlebars = HandlebarsRuntime.default; });

You can see an example of a modern application using the compiled Handlebars and RequireJS templates at https://github.com/ryan-blunden/handlebars-requrejs

0
source share

More articles:


All Articles