alexmanno / ember-handlebars-brunch

This Brunch plugin adds support for pre-compiling Ember Handlebars templates prior to runtime

Ember Handlebars for Brunch

This Brunch plugin adds support for pre-compiling Ember Handlebars templates prior to runtime, utilizing the latest and greatest EmberJS build (1.2.0).

Installation and Usage

Add "ember-handlebars-brunch": "1.2.0" to package.json within your Brunch application codebase.

Within the templates compiler config object of the config.coffee file, set precompile: true to enable pre-compiling.

Note: Be sure to remove the handlebars-brunch plugin if it is installed in your current project.

templates:
    precompile: true  # default is false
    root: 'templates/'  # default is null
    defaultExtension: 'hbs'
    joinTo: 'javascripts/app.js' : /^app/

A few reminders about the configuration object mentioned above:

1. Make sure the extension of each template file matches the defaultExtension property
2. The value you provide for root should represent a directory located under your app directory. If you do not provide a value for this property, ember-handlebars-brunch will, by default, set the template name to the path of your file, starting from app. For instance, without defining the root property, a template located at app/templates/index.hbs will be registered with Ember as Ember.TEMPLATES['app/templates/index'].

If using the exact example configuration above, your views and templates directories should look similar to this:

└─┬ app
  ├─┬ templates
  │ ├─┬ index
  │ │ └── login.hbs
  │ ├── application.hbs
  │ └── index.hbs
  └─┬ views
    ├─┬ index
    │ └── login.js
    ├── application.js
    └── index.js

Based on the example above, you can define your views like so:

// app/views/application.js
App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

// app/views/index.js
App.IndexView = Ember.View.extend({
    templateName: 'index'
});

// app/views/index/login.js
App.IndexLoginView = Ember.View.extend({
    templateName: 'index/login'
});

The precompiled templates are injected into the Ember.TEMPLATES namespace. You can access them within your JS code like so:

var anotherTemplate = Ember.TEMPLATES['index/login'];

If you wish to require the template instead of declaring them directly within a view class or within your code as mentioned above, you have to use the full path to the file, starting from the templates directory;

require('templates/index/login');