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

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

本文关键字：可观察性 计算 属性 声明 何使用 ES6 Ember      更新时间：2023-09-26

尝试将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()
});

到目前为止，我所掌握的似乎不起作用，因为没有正确引用.properties。这是如何实现的？

ES6仅在类内部支持该语法。我不确定Ember是否以标准JavaScript的方式公开了它的类系统。

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

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

它对我来说读起来好多了。

以下内容似乎适用于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风格。

使用新的getter语法：

foo: Ember.computed('bar', {
  get() {
    return this.get('bar');
  }
})
相关文章：