How can I use the Handlebars runtime with Require.js?

Question

In Grunt's package.json I've specified a handlebars compiler:

"grunt-contrib-handlebars": "0.7.0"

In the Gruntfile I'm precompiling the handlebars templates:

handlebars:
  compile:
    options:
      amd: true
      namespace: false
    files: [{
      expand: true
      cwd: 'src/mustache/',
      src: ['**/*.mustache']
      dest: 'public/js/compiled/templates'
      ext: '.js'
    }]

Each compiled template has an AMD wrapper that requires handlebars:

define(['handlebars'], function(Handlebars) {
return Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
...

In Bower's bower.json I've specified handlebars:

"handlebars": "1.3.0"

In my RequireJS config I'm specifying the handlebars runtime:

require.config
  baseUrl: '/js/compiled/'
  paths:
    'jquery': '../bower_components/jquery/jquery'
    'underscore': '../bower_components/underscore/underscore'
    'backbone': '../bower_components/backbone/backbone'
    'handlebars': '../bower_components/handlebars/handlebars.runtime.amd'
  ...

(source here https://github.com/components/handlebars.js/blob/v1.3.0/handlebars.runtime.amd.js)

When the compiled template requires handlebars

Handlebars = require 'handlebars'

Handlebars is undefined! What am I doing wrong here!? I'd appreciate any help!

I'd prefer to not use any require plugins.

Ryan Blunden Ryan Blunden · Accepted Answer · 2014-08-06T18:28:53

The compiled AMD template in your example is not what the Handlebars 1.3.0 template compiler would output. This could be an issue with grunt-contrib-handlebars using an earlier version than 1.3.0 to compile templates.

Also, nothing special needs to be done when using the Handlebars AMD runtime. For example, your min.'s (for the Handlebars runtime AMD loader) should look like this. No deps, shims or exports are required.

requirejs.config({
  ...
  paths: {
  'handlebars.runtime': 'lib/handlebars.runtime.amd'
  }
});

Then if you want to access the Handlebars object (perhaps for registering helpers), then you'll need to access the default property from the returned object.

var Handlebars = require('handlebars.runtime').default;

You might also want to checkout my repo on GitHub at https://github.com/ryan-blunden/handlebars-requrejs which shows Handlebars and RequireJS working together.

How can I use the Handlebars runtime with Require.js?

2 Answers