CODEWITHSUNDEEP
javascriptrequirejshandlebars.js
Thant Sin Aung
Thant Sin Aung

Reputation: 722

How to load Handlebars runtime with RequireJS

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

Upvotes: 7

Views: 4531

Answers (2)

Ryan Blunden
Ryan Blunden

Reputation: 11

If you are using RequireJS, you should be including the AMD version of the runtime in which case no exporting is 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 (e.g. to register a helper).

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

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

Upvotes: 0

Karolis
Karolis

Reputation: 2959

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.

Upvotes: 2

Related Questions