0

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

所以，这是我拥有的一个控制器文件

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

虽然我更新了计数，但它从未反映在模板中。我在这个地方犯了什么错误？

4

1 回答 1

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

于 2020-12-25T20:27:41.470 回答