HTMLBars HTML syntax to load components in EmberJS application?


I’m upgrading an Ember app from 1.9 with handlebars to #canary with HTMLBars. I’ve following instructions per dockyard blog from Dec '14 and for the most part I think things are working - that is my app functions - but as I switch {{my-component}} style component loading to they fail to load although any other moustache content renders as expected.

package.json shows:

    "devDependencies": {
    "broccoli-asset-rev": "^2.0.2",
    "ember-cli": "0.2.2",
    "ember-cli-app-version": "0.3.3",
    "ember-cli-babel": "^4.0.0",
    "ember-cli-content-security-policy": "0.4.0",
    "ember-cli-dependency-checker": "0.0.8",
    "ember-cli-htmlbars": "^0.7.6",
    "ember-cli-ic-ajax": "0.1.1",
    "ember-cli-inject-live-reload": "^1.3.0",
    "ember-cli-qunit": "0.3.9",
    "ember-cli-uglify": "1.0.1",
    "ember-data": "^1.0.0-beta.16.1",
    "ember-export-application-global": "^1.0.2",
    "emberfire": "^1.4.4",
    "htmlbars": "^0.11.3",
    "liquid-fire": "^0.19.2"

and bower.json:

    "dependencies": {
    "jquery": "^1.11.1",
    "ember": "canary",
    "ember-data": "canary",
    "ember-resolver": "~0.1.15",
    "loader.js": "ember-cli/loader.js#3.2.0",
    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
    "ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2",
    "ember-qunit": "0.3.0",
    "ember-qunit-notifications": "0.0.7",
    "qunit": "~1.17.1",
    "firebase": "^2.1.0"

Lastly, I added ‘ember-htmlbars’ :true to EmberENV.FEATURES in config/environment after updating bower and npm, I purged bower_components and node_modules and re-installed both

Also in console or ember inspector there is no reference of an HTMLBars version … but I assume it’s loaded and working because the templates are compiled. I have seen screenshots and other code around where people’s consoles show versions for HTMLBars.

So what am I missing??!


I don’t know if this is the problem but I don’t have the ENV.FEATURES or htmlbars in my package and am using the new htmlbars dependent bind-attr syntax. I believe it should come in by default with the most recent setup.

Perhaps try running ember init and checking the diffs.


Thanks for the reply … removing the FEATURE didn’t do it for me, that is I still see no HTMLbars in any logging and the html style syntax for components still doesn’t load the component. I’ll spin up a new project and updated ENV when I get a moment and see if I can figure this out.

Could you post your package.json and bower.json for me?


When you say html style syntax are you referring to if so that’s not yet available as far as I know. The bind-attr syntax I was referring to was this one. If you want to see what a fresh package.json and bower.json look like run ember.init in your current project. This is the recommended way to upgrade ember-cli and it will also let you see the diffs for each file.