How do you use precompiled handlebars templates with emberjs 1.0.0-rc.2?

Question

I'm trying to use guard-handlebars to precompile my handlebars templates (to avoid having them all in my index.html, which feels slightly sub-optimal...). The precompilation works well, and Ember accepts the fact that the template accept when I inject it into Ember.TEMPLATES like this:

Ember.TEMPLATES['application'] = Handlebars.templates['application']

However, it doesn't work. I get an exception like this:

Could not find property 'outlet'

...in the Handlebars helperMissing method. It seems like Ember uses some monkey-patching of the default Handlebars stuff, supposedly adding support for the {{outlet}} helper and others. But my template does not seem to use these outlets. How do you work around this?

I'm using the handlebars compiler installed via NPM to compile the templates.

Answer 1

Found a duplicate question with a suggested solution/workaround: How can I consume handlebars command-line generated templates with Ember?

(short summary: yes, precompiling with the handlebars command line program does not work straight away, exactly because of the reason I am suggesting in the original question)

Answer 2

The plugin for you.

(Here's a sample integration: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences/blob/master/Gruntfile.js)

Answer 3

The guard-handlebars gem is pretty out of date, it was not designed to work with ember.

Today there are a few options.

• barber with rake-pipeline
• grunt-ember-templates

For example, to compile an ember template with barber try something like this:

compiled_template = Barber::Ember::FilePrecompiler.call(IO.read(file))
# now ruby variable compiled_template is a string like: "Ember.Handlebars.template(function(...));"

result = "Ember.TEMPLATES['#{name}'] = '#{compiled_template}';"
# now result is a JS string that sets Ember.TEMPLATES[name] to precompiled handlebars

When a new version of ember comes out it can take a few days to make it's way thru the ecosystem. When that happens you might find the ember-source gem helpful. See Alex's blog post for more detail:

http://alexmatchneer.com/blog/2013/02/27/gemifying-ember-dot-js-slash-handlebars-dot-js-slash-etc-dot-js/