Ember 3 计算属性答案

【问题标题】：Ember 3 Computed PropertiesEmber 3 计算属性
【发布时间】：2019-03-11 15:06:29
【问题描述】：

我正在尝试从 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]，而不是值。我错过了什么吗？

【问题讨论】：

这通常是当您将承诺返回到模板时发生的情况。你的真实代码中是否偶然有async function？
不，我的代码中没有任何异步函数，但也许我错过了什么
@Gemkodor 如果您发现我的解决方案有帮助，请验证我的回答。谢谢

标签： javascript ember.js properties migration

【解决方案1】：

我认为您需要使用function 而不是箭头函数，因为使用箭头函数，this 会丢失。

使用计算的function 保持this 引用组件实例。

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

【讨论】：

事实上我已经使用了函数而不是箭头函数，我在描述问题时犯了一个错误。我编辑了我的问题的描述，实际上我的问题更多是“如何访问模板中的计算属性”。我迁移后在模板中显示为[object]，不明白为什么
您使用的是什么版本的 ember？我认为直到 ember 3.1 才添加本地吸气剂
我使用的是 ember 3.8
您能分享一下this.attr1 和this.attr2 是什么吗？或在ember-twiddle.com 上复制？
这很奇怪，我试图在 ember-twiddle 上进行复制，但它可以工作。我有类似的东西：ember-twiddle.com/… 除了在我的情况下，计算的属性没有被调用

【解决方案2】：

这是一个专门针对 ember-cli 3.4 的 sn-p

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%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

希望对你有帮助。

【讨论】：

【解决方案3】：

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

如果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}`;
}),

【讨论】：

我认为totalPrice 是一个计算属性，它将两个属性相加，这将导致number 所以return ${this.attr1} ${this.attr2}@987654330 @ 可能是不可能的。如果它是一个字符串，那么 return ${this.attr1} ${this.attr2}; 是适用的，因为您正在组合两个字符串属性。我相信他想添加两个数字属性。
修改了我的答案。文字和数字分别解释！