观察emberjs模板中json对象的变化

Question

如何观察ember模板中json对象的变化，这是我的测试代码，我希望在点击updateJson后显示jsonChange按钮，但没有

测试.hbs

<button {{on "click" this.updateJson}} >updateJson</button>
{{#if this.testJsonChanges}}
<button>jsonChange</button>
{{/if}}

测试.js

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

Answer 1

@tracked

仅适用于引用，就像 const 仅在引用上是常量一样 - 如果您希望跟踪属性的更改，则需要使用

TrackedObject

import { TrackedObject } from 'tracked-built-ins';

export default class TestController extends Controller {
  testjson = new TrackedObject({key1:'value1', key2:'value2'});

  @action updateJson() {
    this.testjson.key1 = 'valuex';
  }
    
  get testJsonChanges() {
    return this.testjson.key1 != 'value1';
  }
}