/grunt-required-handlebars

Require additional AMD dependencies from handlebars templates

Primary LanguageJavaScriptMIT LicenseMIT

Enhandced AMD wrappers for handlebars

Better dependency arrays provide access to local require and referenced classes.

+ --base
|    |-- view.handlebars
|    |-- path
|        |-- to
|            |-- subview.js
|-- build
|    |-- view.jst.js
+ handlebars-helpers.js

Use {{require}} to indicate dependencies

Handlebars template

<!-- view.handlebars -->
{{require "./path/to/subview" }}

<h1>{{title}}</h1>
<div class="campus">
  {{view "./path/to/subview" }}
</div>

Compiled template

Compiled templates include local require and all referenced classes in dependency array.

// view.jst.js
define(["require", "./path/to/subview"], function(localRequire) {

  // ... code for template ...

  // access to local require attached to template fn
  templateFn.require = localRequire;
  return templateFn;

});

Example use

Can make the template's require available to views by passing it as part of the data hash

render = function(){
  var html, context, data;

  context = this.templateContext();
  data = { require: this.template.require };
  html = this.template(context, data);

  this.$el.html(html);
}
// handlebars-helpers.js
Handlebars.registerHelper("view", function(name, options){
  var id = _.uniqueId();

  // can load modules relative to template file
  options.data.require([name], function(View){
    var view = new View(options); // LocalView class
    $("#" + id).html(view.render().el);
  });

  return "<div id='" + id + "'></div>";
});

complete example here