Ember-Octane：更新時無法在模板中觀察到 Obj？

Question

你們中的大多數人認為這是一個奇怪的問題。 我也是...

所以，這是我擁有的 controller 文件

application.js

export default class Application extends Controller.extend(someMixin)  {
   @tracked markedValues = {
      item1: {content: "This is item1", count: 1}
      item2: {content: "This is item2", count: 1}
   }

   @action updateCount(itemKey) {
       this.markedValues[itemKey].count = this.markedValues[itemKey].count + 1;
       this.markedValues = {...this.markedValues}
   }
}

application.hbs
  {{#each-in this.markedValues as |key value|}}
        <div {{on "click" (fn this.updateCount key)}}>{{value.content}} and number is {{value.count}}</div>
  {{/each}}

雖然我更新了計數，但它從未反映在模板中。 我在這個地方犯了什么錯誤？

Answer 1

問題是內部屬性count沒有被跟蹤。

這是修復它的一種方法：

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

class Item {
  @tracked count;
  constructor(content, count) {
    this.content = content;
    this.count = count;
  }
}

export default class ApplicationController extends Controller {
   @tracked markedValues = {
      item1: new Item("This is item1", 1),
      item2: new Item("This is item2", 1)
   }

   @action updateCount(itemKey) {
       this.markedValues[itemKey].count = this.markedValues[itemKey].count + 1;
       this.markedValues = {...this.markedValues}
   }
}

看到它在這里工作： https://ember-twiddle.com/5e9f814ccf60821b4700b447f1898153?openFiles=controllers.application%5C.js%2C