Ember.js: HtmlBars and the Handlebars.compile Team

Question

When starting the application, the following error appears:

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

This is related to this part of the code:

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

The problem with this problem is related to ember.js github: https://github.com/emberjs/ember.js/issues/10265

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

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" 

Link: ember-template-compiler github page

Does anyone have any experience with HtmlBars and the compilation team?

Answer 1

You are trying to compile an HTMLBars template on the client, however adding the ember-template-compiler to package.json only allows the preliminary compilation of HTMLBars templates on the server side.

To enable client-side compilation, you must add ember-template-compiler to bower.json , for example. (use the 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 the Ember.js 1.10 template compiler is part of Ember, so all you have to do to compile the templates on the client side is to add the following line to 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 an application /templates/views/carousel.hbs:

 {{view view.itemsView}} 

Then CarouselView becomes:

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

Thus, you do not need to provide a template compiler to the client. There should be better performance and less payload for the client to download.