Question

我正在尝试使用Octane，由于某种原因，如果我在模板中显示一个数组并向其中添加新对象，则UI不会更新。我在做什么错了？

这是我的模板：

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ConfigControlsComponent extends Component {
    @tracked fields = []
    @tracked newFieldName = ''

    @action addField() {
        this.fields.push({
            name: this.newFieldName
        })
        console.log(this.fields)
    }
}

以及组件：

console.log

fields显示了添加了新对象的数组，并且跟踪了{{1}}数组，但是当我单击按钮时没有任何变化。

Answer 1

将tracked与数组一起使用时，需要“重置”数组，以便Ember注意到发生了变化。将新对象推入数组后，尝试执行this.fields = this.fields。

编辑：一些短毛猫会防备自我分配。因此，相反，我们可以从不变性模式中提取并使用新数组进行设置，如下所示。

export default class ConfigControlsComponent extends Component {
  @tracked fields = []
  @tracked newFieldName = ''

  @action addField() { 
    // add this line
    this.fields = [...this.fields, {
      name: this.newFieldName
    }]; 
  }
}

如果您尝试将tracked用于对象而不是数组，则有两个选择：

首先，您可以创建一个跟踪对象上所有属性的类：

import { tracked } from '@glimmer/tracking';

class Address {
  @tracked street;
  @tracked city;
}

class Person {
  address = new Address();

  get fullAddress() {
    let { street, city } = this.address;

    return `${street}, ${city}`;
  }
}

或者，第二，您可以使用与上面的数组示例相同的“重置”方法。

为什么我的跟踪阵列在Ember Octane中不更新？

1 个答案: