How to observe json object changes in ember template, here's my test code, I expect to show jsonChange button after I click updateJson, but it didn't
test.hbs
<button {{on "click" this.updateJson}} >updateJson</button>
{{#if this.testJsonChanges}}
<button>jsonChange</button>
{{/if}}
test.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';
}
}
@tracked
only applies to references, much like const is only constant on references -- if you want changes of properties to be tracked, you'll need to use 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';
}
}