Ember Octane，跟踪属性不重新渲染模板

Question

来自 React 背景，我在理解 EmberJs“Tracked”概念时遇到了问题。 在纸面上它不应该与“反应状态”不同。

所以我的理解是，当我们用@tracked注释一个属性时，当这个属性发生变化时，它应该会导致重新渲染。

请看下面的代码：

ProductItem组件

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class ProductItemIndexComponent extends Component {
  @service('cart') cartService;

  @tracked addedToCart = false;

  @action
  checkItemInCart(id) {
    if (this.cartService.items.findBy('id', id)) {
      this.addedToCart = true;
    } else {
      this.addedToCart = false;
    }
  }
}

模板,

<div class="card-container">
  <div class="card product-item" {{did-insert (fn this.checkItemInCart @item.id)}}>
    <img src={{@item.image}} class="product-image card-img-top" alt="...">
    <div class="card-body">
      <h5>{{@item.title}}</h5>
    </div>
    <div class="footer">
      <p class="card-text"><span class="badge badge-secondary"><strong>Price: </strong>{{@item.price}}</span></p>
      <button type="button" class="btn btn-warning" {{on 'click' (fn @handleCartAction item)}}
        disabled={{this.addedToCart}}>Add
        to cart</button>
    </div>
  </div>
</div>

当我第一次渲染组件时，我使用{{did-insert (fn this.checkItemInCart @item.id)}}检查购物车中是否存在当前商品，如果存在，我将切换跟踪属性@tracked addedToCart = false; 为真否则为假。

从理论上讲，这应该在我的 productItem 模板中一找到cartService中的 Item 就禁用我的按钮。 它仅在我 go 到另一个页面然后返回时才有效。

但是页面没有重新呈现。 有人可以帮助我了解我可能做错了什么吗？

先感谢您

Answer 1

您的问题是checkItemInCart只被调用一次，因此一旦更改cartService.items addedToCart就不会更新。

我认为正确的解决方案是使addedToCart依赖于cartService.items和item

get addedToCart(){
  return !!this.cartService.items.findBy('id', this.args.item.id)
}

为此， cartService.items也应该是 tracked 属性，并使用pushObject等方法进行更新，请参阅为什么我的跟踪数组不会在 Ember Octane 中更新？