Ember.js模板中如何监听JSON对象变化？问题求助

问题原因 #

Ember的@tracked装饰器默认只追踪对象引用的变更。你直接修改testjson的内部属性key1时，对象本身的引用没有改变，因此@tracked无法检测到变化，导致计算属性testJsonChanges不会重新计算，模板也不会刷新显示jsonChange按钮。

解决方案 #

方案1：替换整个对象（推荐，无需额外依赖） #

通过创建新对象替换原有对象，改变引用触发追踪：

@action updateJson() {
  this.testjson = {
    ...this.testjson, // 保留原有其他属性
    key1: 'valuex'
  };
}

方案2：使用TrackedObject（适合频繁修改内部属性的场景） #

Ember提供TrackedObject来创建深度追踪的对象，修改内部属性会自动触发更新：
首先导入TrackedObject：

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

然后初始化对象：

@tracked testjson = new TrackedObject({key1:'value1', key2:'value2'});

此时你原来的updateJson方法无需修改，直接修改内部属性即可触发更新：

@action updateJson() {
  this.testjson.key1 = 'valuex';
}

方案3：使用set函数（兼容旧版Ember，不推荐新项目使用） #

导入set工具函数来修改属性：

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

@action updateJson() {
  set(this.testjson, 'key1', 'valuex');
}

修改后的完整代码示例（方案1） #

test.js：

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class TestController extends Controller {
  @tracked testjson = {key1:'value1', key2:'value2'};
  
  @action updateJson() {
    this.testjson = {
      ...this.testjson,
      key1: 'valuex'
    };
  }
    
  get testJsonChanges() {
    return this.testjson.key1 != 'value1';
  }
}

内容的提问来源于stack exchange，提问作者s.w