Блог

Я пытаюсь перейти с ember 2 на ember 3, и у меня возникают проблемы с вычисляемыми свойствами.

Раньше у меня были такого рода вычисляемые свойства в компоненте :

 import Ember from 'ember';

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

и я мог бы сделать в шаблоне hbs что-то вроде :

 Total : {{totalPrice}}
  

В новой версии ember у меня есть это :

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

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

Но в шаблоне свойство TotalPrice отображается как [object] , а не со значением. Я что-то упускаю?

Я думаю, вам нужно использовать function вместо функции со стрелкой, потому что с функциями со стрелкой this теряется.

с помощью вычисляемого function сохраняется this ссылка на экземпляр компонента.

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

Вот фрагмент специально для 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 , вот ember twiddle, с которым вы можете поиграть
https://ember-twiddle.com/8801e28a888b469b8057d67a63829808?openFiles=controllers.application.js,

Если вы хотите объединить строку вместе, она должна быть такой

   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

Надеюсь, это поможет.

Приведенный ниже код должен работать нормально.

Если 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}`;
}),