Ember 3 Computed Properties - PullRequest
Новая
       12

Ember 3 Computed Properties

0 голосов
/ 11 марта 2019

Я пытаюсь перейти с 2 января на 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], а не со значением. Я что-то упустил?

Ответы [ 3 ]

0 голосов
/ 14 марта 2019

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

Если 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}`;
}),
0 голосов
/ 18 марта 2019

Вот фрагмент специально для 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

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

0 голосов
/ 11 марта 2019

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

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

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