Ember.js: HtmlBars and the Handlebars.compile command

Question

I get the following error when running my app:

Uncaught Error: Cannot call `compile` without the template compiler loaded. Please load `ember-template-compiler.js` prior to calling `compile`.

It is related to this piece of code:

var CarouselView = Ember.View.extend({
    template: Ember.Handlebars.compile('{{view view.itemsView}}'),
    elementId: 'carousel',
    contentBinding: 'content',
    ...

There is already an issue related about this problem on ember.js github: https://github.com/emberjs/ember.js/issues/10265

However I added ember-template-compiler to my package.json and got the same error again.

I did: npm install --save-dev ember-template-compiler

Here are my package.json devDependencies:

 "ember-cli": "0.1.10",
 "ember-cli-app-version": "0.3.0",
 "ember-cli-content-security-policy": "0.3.0",
 "ember-cli-dependency-checker": "0.0.7",
 "ember-cli-htmlbars": "^0.6.0",
 "ember-cli-ic-ajax": "0.1.1",
 "ember-cli-inject-live-reload": "^1.3.0",
 "ember-cli-qunit": "0.3.0",
 "ember-cli-simple-auth": "^0.7.2",
 "ember-cli-simple-auth-cookie-store": "^0.7.2",
 "ember-cli-simple-auth-oauth2": "^0.7.2",
 "ember-cli-uglify": "1.0.1",
 "ember-data": "1.0.0-beta.12",
 "ember-export-application-global": "^1.0.0",
 "ember-template-compiler": "^1.8.0",
 "express": "^4.8.5",
 "glob": "^4.0.5"

Reference: the ember-template-compiler github page

Anyone has experience with HtmlBars and the compile command?

Answer 1

You are trying to compile HTMLBars template on the client, however adding ember-template-compiler in package.json only enables precompilation of HTMLBars templates server-side.

To enable client-side compilation, you should add ember-template-compiler to the bower.json, e.g. (use appropriate version)

"ember-template-compiler": "http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"

and then include it in Brocfile.js,

app.import('bower_components/ember-template-compiler/index.js');

Answer 2

Since Ember.js 1.10 template compiler is part of Ember, so all you have to do to compile templates in client side is to add following line in your Brocfile:

app.import('bower_components/ember/ember-template-compiler.js');

Answer 3

For my views, I just created template files for them. To use your case as an example, I would create app/templates/views/carousel.hbs:

{{view view.itemsView}}

Then CarouselView becomes:

var CarouselView = Ember.View.extend({
  templateName: 'views/carousel',
  elementId: 'carousel',
  contentBinding: 'content',
  ...

This way you don't have to give the client the template compiler. Should result in better performance and a smaller payload for the client to download.