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