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

Question

你们大多数人都认为这是一个奇怪的问题。我也是。

所以，这是我的控制器文件

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