HTMLBars HTML syntax to load components in EmberJS application?


#1

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??!


#2

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.


#3

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?


#4

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.