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


        

Answer 1

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 2

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