如何正确使用Ember.computed？

Question

我创建了一个组件并尝试将计算属性分配给样式。我无法弄清楚如何正确使用Ember.computed。

这不起作用（为什么？）：

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;';
  })
}

虽然这有效：

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')
}

如何正确使用Ember.computed？为什么它在我的例子中不起作用？

我的意思是“不工作”，样式属性未分配给组件div元素。

我在2.2使用EMBER和EMBER DATA。以下是我的项目依赖项：

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"
},

Answer 1

两个版本应该以相同的方式工作：）

我在Ember Twiddle上添加了第一个语法示例，它运行正常：您可以找到它here。

Answer 2

两者都是正确的。 .property('width', 'height')是定义计算属性的旧方法，Ember.computed('width', 'height', function(){自Ember 1.12以来的新方法（参见发布说明http://emberjs.com/blog/2015/05/13/ember-1- 12 released.html）。

当然，推荐使用Ember.computed的版本。如果您查看较新的Ember指南，您会看到.property不再被提及。