Question

我正在尝试从余烬2迁移到余烬3，并且我在计算属性方面遇到问题。

之前，我在组件中具有这种计算属性：

import Ember from 'ember';

totalPrice: Ember.computed('attr1', 'attr2', function() {
    return this.attr1 + this.attr2;
})

我可以在hbs模板中做类似的事情：

Total : {{totalPrice}}

在新版本的余烬中，我有这个：

import { computed, set } from '@ember/object';

totalPrice: computed('attr1', 'attr2', function() {
   return this.attr1 + this.attr2;
})

但是在模板中，totalPrice属性显示为[object]，而不显示值。我想念什么吗？

Answer 1

我认为您需要使用function代替箭头功能，因为使用箭头功能，this会丢失。

与计算的function一起保持this引用组件实例。

computed('attr1', 'attr2', function() {
   return this.attr1 && this.attr2;
})

Answer 2

下面的代码应该可以正常工作。

如果attr1和attr2是文本。

import { computed } from '@ember/object';
...
totalPrice: computed('attr1', 'attr2', function() {
  return `${this.attr1} ${this.attr2}`;
})

attr1和attr2是数字。

attr1: 1,
attr2: 2,
totalPrice: computed('attr1', 'attr2', function () {
  return this.attr1 + this.attr2;
  //(or)
  return `${this.attr1 + this.attr2}`;
}),

Answer 3

这是专门针对ember-cli 3.4

的代码段

import Controller from '@ember/controller';
import { computed } from '@ember/object';

export default Controller.extend({
  appName: 'Ember sdfa',

  attr1: 1,
  attr2: 2,
  attr3: 'foo',
  attr4: 'bar',
  attr5: 3,
  attr6: 4,

  totalPrice: computed('attr1', 'attr2',function() {
    let a = this.attr1 ? this.attr1 : 0;
    let b = this.attr2 ? this.attr2 : 0;
    let total = a + b;

    return total;
  }),
});

这应该能获得totalPrice，这是您可以玩的余烬 https://ember-twiddle.com/8801e28a888b469b8057d67a63829808?openFiles=controllers.application.js%2C

如果要将字符串连接在一起，应该是这样

  fooBar: computed('attr3', 'attr4', function() {
    let foo = this.attr3 ? this.attr3 : null;
    let bar = this.attr4 ? this.attr4 : null;

    return `${foo} ${bar}`
  }),

，输出将为foo bar

如果要合并数字，请按照以下步骤操作

combinedNumber: computed('attr5', 'attr6', function() {
    let a = this.attr5 ? this.attr5 : null;
    let b = this.attr6 ? this.attr6 : null;

    return `${a} ${b}`
  }),

combineNumber的输出为3 4

希望有帮助。

Ember 3计算属性

3 个答案: