Why does my Handlebars not have a compile method?

Question

I am setting up a Backbone project with Handlebars and I am having an issue with Handlebars not finding the compile method. Here is my config file:

require.config({
  hbs: {
    templateExtension: '.hbs'
  },
  paths: {
    backbone: "libs/backbone/backbone",
    handlebars: 'libs/handlebars/handlebars.amd',
    hbs: 'libs/requirejs-hbs/hbs',
    jquery: 'libs/jquery/jquery',
    jqueryMockAjax: 'libs/jquery-mockjax/jquery.mockjax',
    text: 'libs/requirejs-text/text',
    templates: 'templates/',
    underscore: 'libs/underscore/underscore'
  },
  shim: {
    backbone: {
      deps: [
        'underscore',
        'jquery'
      ],
      exports: 'Backbone'
    },
    hbs: {
      deps: ['handlebars'],
      exports: 'hbs'
    },
    jqueryMockAjax: {
      deps: [ 'jquery' ],
      exports: '$.mockjax'
    },
    underscore: {
      exports: '_'
    }
  }
});

require(['app'], function(App) {
  'use strict';

  var app = new App();
  app.render();
});

Here is the app.js that I am trying to render:

define(function(require) {

  var Backbone = require('backbone');
  var testTemplate = require('hbs!templates/test');

  var router = Backbone.View.extend({
    el: $('body'),
    template: testTemplate,
    render: function() {
      return $(this.el).html(this.template());
    }
  });

  return router;
});

When Handlebars calls the hbs.js file on line 25 it cannot find the compile function

define(["handlebars"], function(Handlebars) {
  var buildMap = {},
      templateExtension = ".hbs";

  return {

    // http://requirejs.org/docs/plugins.html#apiload
    load: function (name, parentRequire, onload, config) {

      // Get the template extension.
      var ext = (config.hbs && config.hbs.templateExtension ? config.hbs.templateExtension : templateExtension);

      if (config.isBuild) {
        // Use node.js file system module to load the template.
        // Sorry, no Rhino support.
        var fs = nodeRequire("fs");
        var fsPath = config.dirBaseUrl + "/" + name + ext;
        buildMap[name] = fs.readFileSync(fsPath).toString();
        onload();
      } else {
        // In browsers use the text-plugin to the load template. This way we
        // don't have to deal with ajax stuff
        parentRequire(["text!" + name + ext], function(raw) {
          // Just return the compiled template
 ****HERE onload(Handlebars.compile(raw));
        });
      }

    },

    // http://requirejs.org/docs/plugins.html#apiwrite
    write: function (pluginName, name, write) {
      var compiled = Handlebars.precompile(buildMap[name]);
      // Write out precompiled version of the template function as AMD
      // definition.
      write(
        "define('hbs!" + name + "', ['handlebars'], function(Handlebars){ \n" +
          "return Handlebars.template(" + compiled.toString() + ");\n" +
        "});\n"
      );
    }

  };
});

The Handlebars variable gives me the Handlebars environment, but it has an extra layer in it, so I have to change that line to Handlebars.default.compile(raw). Where is that default object coming from and how do I get rid of it? I wouldn't worry about it, but if I pull down this project somewhere else I am always going to have to remember to do that.

Answer 1

I just encountered this myself, using Handlebars for this first time. It's likely that you're using the "runtime" build of Handlebars. I included this one in my requirements, mistakenly assuming it was the minified version or something.

But in fact the runtime version is significantly smaller as it excludes the template compiler, and is for use only with pre-compiled templates. If you're compiling the template client-side then you need the full version from http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v3.0.3.js (Note: This link may be out of date; you're probably better off going directly to handlebarsjs.com and looking for the current download for the "full version", as opposed to runtime.)

Otherwise, you can follow the instructions on the Handlebars website to run the template compiler. You need node for this. The template compiler produces a JavaScript file containing the pre-compiled template code which you need to link to your page along with the Handlebars runtime build.