如何使用 ES6 在 Ember 中声明可观察对象或计算属性？

Question

尝试将 ES6 用于我的所有 Ember 工作。我有以下 ES6 语法问题：

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

ES5:

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

ES6:

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

到目前为止我所拥有的似乎没有用，因为 .属性没有被正确引用。这是如何实现的？

Answer 1

ES6 仅在 class 内部支持该语法。我不确定 Ember 以与标准 JavaScript.

兼容的方式公开其 class 系统

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

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" 以及在构造函数中定义函数的稍微烦人的方面。

您也可以拆分函数定义：

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

如何使用 ES6 在 Ember 中声明可观察对象或计算属性？

How to declare observables or computed properties in Ember using ES6?

javascript

ember.js

ecmascript-6