Ember:在计算属性中未检测到模型的属性更改

基础概念

Ember.js 是一个用于构建单页应用程序的 JavaScript 框架，它使用计算属性（computed properties）来自动更新视图。计算属性是基于它们的依赖项动态计算的值。当依赖项发生变化时，计算属性会重新计算其值。

问题原因

在 Ember.js 中，如果你在一个计算属性中没有检测到模型的属性更改，可能有以下几个原因：

依赖项未正确声明：计算属性必须明确声明它所依赖的属性。如果没有声明，Ember 将无法知道何时重新计算该属性。
异步更新：如果模型的属性是通过异步操作（如 AJAX 请求）更新的，Ember 可能不会立即检测到这些更改。
不可变数据：如果你直接修改了对象的属性而不是使用 Ember 的 set 方法，Ember 的依赖跟踪系统可能无法检测到这些更改。

解决方案

1. 确保依赖项正确声明

确保你的计算属性声明了所有它所依赖的属性。例如：

import Component from '@glimmer/component';
import { computed } from '@ember/object';

export default class MyComponent extends Component {
  @computed('model.name')
  get fullName() {
    return `${this.model.firstName} ${this.model.lastName}`;
  }
}

在这个例子中，fullName 计算属性依赖于 model.name。

2. 使用 Ember 的 `set` 方法

始终使用 Ember 的 set 方法来更新对象的属性，以确保依赖跟踪系统能够检测到更改：

this.model.set('name', 'New Name');

3. 处理异步更新

如果你在处理异步操作，确保在数据更新后通知 Ember 进行重新计算。你可以使用 Ember.run.next 或 this.notifyPropertyChange 方法：

import { inject as service } from '@ember/service';
import { task } from 'ember-concurrency';

export default class MyComponent extends Component {
  @service store;
  updateModelTask = task(async () => {
    let model = await this.store.findRecord('model', 1);
    model.set('name', 'New Name');
    this.notifyPropertyChange('model.name');
  });
}

应用场景

计算属性在以下场景中非常有用：

动态表单验证：根据用户输入实时验证表单字段。
复杂数据转换：将多个模型属性组合成一个新的值。
过滤和排序列表：根据用户交互动态过滤或排序数据列表。

示例代码

以下是一个完整的示例，展示了如何在 Ember 组件中使用计算属性：

import Component from '@glimmer/component';
import { computed } from '@ember/object';

export default class MyComponent extends Component {
  @computed('model.firstName', 'model.lastName')
  get fullName() {
    return `${this.model.firstName} ${this.model.lastName}`;
  }

  updateName() {
    this.model.set('firstName', 'John');
    this.model.set('lastName', 'Doe');
  }
}

在这个示例中，fullName 计算属性依赖于 model.firstName 和 model.lastName，当这些属性发生变化时，fullName 会自动更新。

通过以上方法，你应该能够解决在 Ember 计算属性中未检测到模型属性更改的问题。