如何使用ES6在Ember中声明可观测值或计算属性？

Question

试着在我所有的Ember作品中使用ES6。我有以下ES6语法问题：

如何将标准的ES5对象文字计算属性转换为ES6语法？

ES5:

 export default Ember.Controller.extend({
     foo: function() {
         return "bar";
     }.property()
    });

ES6:

export default Ember.Controller.extend({
  foo() {
    return "bar"
}.property()
});

到目前为止，由于没有正确引用.property，所以我所拥有的内容似乎不起作用。这是如何实现的？

Answer 1

ES6只在类内部支持这种语法。我不确定Ember是否以与标准JavaScript一起工作的方式公开了它的类系统。

我强烈建议不要使用原型扩展。也就是说，你总是这样做：

foo: Ember.computed('bar', function() {
  return this.get('bar');
})

对我来说读起来好多了。

Answer 2

以下内容似乎适用于Ember 1.13：

export default class extends Ember.Controller {
  constructor(...args) {
    super(...args);

    this.foo = Ember.computed('bar', function() {
      return this.get('bar');
    });
  }
}

请注意“导出默认类”和在构造函数中定义函数的稍微恼人的方面。

您还可以拆分函数定义：

export default class extends Ember.Controller {
  constructor(...args) {
    super(...args);

    this.foo = Ember.computed('bar', this.foo);
  }

  foo() {
    return this.get('bar');
  }
}

但是，还有一个缺点，就是将函数的计算性质与函数本身分开。

如果人们有其他的想法，我很喜欢定义类的ES6风格，我很想听听它们。

Answer 3

使用新的getter语法：

foo: Ember.computed('bar', {
  get() {
    return this.get('bar');
  }
})