javascript - Ember 中的 CSS 类是否需要多个计算属性？

Question

所以我有以下代码，它看起来像很多样板文件，而且我有一个更像 Ember 式的解决方案。有没有办法做到这一点，而不需要为每个可能的状态进行计算属性？

本质上，我需要三个可能的类名之一来更改页面上项目的颜色。例如，假设我的销售电话很好、很好、不太好，它会以不同的颜色显示。我从后端接收状态。这就是我正在做的事情。还有别的办法吗？

App.ReturnsEditController = Ember.ObjectController.extend({
  title: "Return Visit",
  titleSmall: "Create or edit your return visit here",
  isGood: (function() {
    return this.get('model').get('quality') === 'good';
  }).property('content.quality'),
  isOk: (function() {
    return this.get('model').get('quality') === 'okay';
  }).property('content.quality'),
  isGreat: (function() {
    return this.get('model').get('quality') === 'great';
  }).property('content.quality'),
});

Answer 1

您可以使用Ember namespace method Ember.compulated.equal 减少代码量，如下所示:

App.ReturnsEditController = Ember.ObjectController.extend({
  title: "Return Visit",
  titleSmall: "Create or edit your return visit here",
  isGood: Em.computed.equal('model.quality', 'good'),
  isOk: Em.computed.equal('model.quality', 'okay'),
  isGreat: Em.computed.equal('model.quality', 'great')
});

您还可以在应用中使用 Em 代替 Ember 和 CoffeeScript，以进一步减少代码量:

App.ReturnsEditController = Em.ObjectController.extend
  title: "Return Visit"
  titleSmall: "Create or edit your return visit here"
  isGood: Em.computed.equal 'model.quality', 'good'
  isOk: Em.computed.equal 'model.quality', 'okay'
  isGreat: Em.computed.equal 'model.quality', 'great'

另请记住，ObjectController 将来将被弃用。