lundi 4 janvier 2016

How to correctly use Ember.computed?

I've created a component and tried to assign computed property to style. I can't figure out how to use Ember.computed properly.

This does not work (why?):

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'div',
  attributeBindings: ['style'],
  width: 800,
  height: 600,
  style: Ember.computed('width', 'height', function(){
    return 'width: ' + this.get('width') + 'px; height: ' + this.get('height') + 'px;';
  })
}

While this works:

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'div',
  attributeBindings: ['style'],
  width: 800,
  height: 600,
  style: function(){
    return 'width: ' + this.get('width') + 'px; height: ' + this.get('height') + 'px;';
  }.property('width', 'height')
}

How to use Ember.computed properly? Why does it not work in my example?

And by "not work" I mean, the style property is not assigned to the component div element.

I'm useing EMBER and EMBER DATA at 2.2. Below are my project dependencies:

package.json

"devDependencies": {
  "broccoli-asset-rev": "^2.1.2",
  "ember-browserify": "1.1.4",
  "ember-cli": "^1.13.13",
  "ember-cli-app-version": "0.5.0",
  "ember-cli-babel": "^5.1.3",
  "ember-cli-bootstrap-sassy": "0.5.1",
  "ember-cli-content-security-policy": "0.4.0",
  "ember-cli-dependency-checker": "^1.0.1",
  "ember-cli-font-awesome": "1.3.0",
  "ember-cli-htmlbars": "0.7.9",
  "ember-cli-htmlbars-inline-precompile": "^0.2.0",
  "ember-cli-ic-ajax": "0.2.1",
  "ember-cli-inject-live-reload": "^1.3.1",
  "ember-cli-qunit": "^1.0.0",
  "ember-cli-release": "0.2.3",
  "ember-cli-sass": "5.2.1",
  "ember-cli-sri": "^1.0.3",
  "ember-cli-uglify": "^1.2.0",
  "ember-component-css": "0.1.6",
  "ember-data": "~2.0",
  "ember-disable-proxy-controllers": "^1.0.0",
  "ember-export-application-global": "^1.0.3",
  "ember-localforage-adapter": "2.2.0"
},

bower.json

"dependencies": {
  "ember": "~2.0",
  "ember-cli-shims": "~0.0.3",
  "ember-cli-test-loader": "~0.1.3",
  "ember-data": "~2.0",
  "ember-load-initializers": "~0.1.5",
  "ember-qunit": "~0.4",
  "ember-qunit-notifications": "~0.0.7",
  "ember-resolver": "~0.1",
  "jquery": "~1.11",
  "loader.js": "~3.2",
  "qunit": "~1.18",
  "bootstrap": "~3.3",
  "font-awesome": "~4.4.0",
  "moment-timezone": "~0.1",
  "bootstrap-sass": "~3.3.6",
  "blob-polyfill": "~1.0.20150320",
  "localforage": "~1.3.1"
},




Aucun commentaire:

Enregistrer un commentaire