Ember-Octane：更新时无法在模板中观察到 Obj？

Question

Most of you thought this is a weired question. Me too...

So, here is a controller file I'm having

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}}

While I was updated the count it never reflects in the template. What mistake I did in this place?

Answer 1

The problem is that the inner property count is not being tracked.

Here's one way to fix it:

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}
   }
}

See it working here: https://ember-twiddle.com/5e9f814ccf60821b4700b447f1898153?openFiles=controllers.application%5C.js%2C