EmberJS - register precompiled handlebars template

Question

For my EmberJS app, I precompile all of my handlebars templates, so they are being loaded as straight Javascript files.

The problem is that these precompiled templates are not making their way into the Ember container like I thought that they would - I get the following error when I specify a template for my view.

Uncaught Error: assertion failed: You specified the templateName "application" for <MyApp.ApplicationView:ember164>, but it did not exist. 

Here is my view code.

window.MyApp.ApplicationView = Ember.View.extend({
   templateName: 'application'
});

I stepped through the execution and saw that the views do not exist in the Ember container. Is there something special I need to do to register precompiled templates with the container? If so, how?

Edit: I've been compiling the templates with the handlebars npm package.

Answer 1

Templates are looked up on Ember.TEMPLATES (which is just a hash with the template name as the key)

So when your example ApplicationView is executed it will look for the template in Ember.TEMPLATES['application']

Answer 2

While the npm handlebars compiler does indeed compile them correctly, you still need to register them with Ember in order for them to load correctly. You can do one of the following:

• Manually load them with Ember.TEMPLATES['sometemplate'] = COMPILED TEMPLATE. This works but becomes something of a pain.
• Use a special compiler like npm ember-precompile, which will compile them in such a way that the compiled templates are automatically registered in the Ember template container.

Answer 3

If you prefer a Ruby/Guard-based solution, check out my gist here: https://gist.github.com/perlun/5286391

Use it like this from your Guardfile:

guard 'ember_handlebars',
    :input => 'app/handlebars_templates',
    :output => 'app/handlebars_compiled',
    :remove_prefix => 'app/handlebars_templates/' do
  watch(%r{app/handlebars_templates/(.+\.handlebars)})
end

```