It is included by default in the Ember Brunch skeleton. However if you would like to import it into your own custom Brunch project, the instructions below will get you up and running.
"ember-handlebars-brunch": "1.0.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.
A few reminders about the configuration object mentioned above:
- Make sure the extension of each template file matches the
- The value you provide for
rootshould represent a directory located under your
appdirectory. 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
rootproperty, a template located at
app/templates/index.hbswill be registered with Ember as
If using the exact example configuration above, your
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.jsAppApplicationView = EmberView;// app/views/index.jsAppIndexView = EmberView;// app/views/index/login.jsAppIndexLoginView = EmberView;
The precompiled templates are injected into the
Ember.TEMPLATES namespace. You can access them within your JS code like so:
var anotherTemplate = EmberTEMPLATES'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;