This Brunch plugin adds support for pre-compiling Ember Handlebars templates prior to runtime
CoffeeScript JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Build Status

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 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.

    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;


Bitdeli Badge