Ember Octane中@tracked属性变更未触发模板重渲染问题咨询

问题原因 #

• {{did-insert}} 修饰器仅会在组件首次插入DOM时执行一次，后续购物车items数据发生变化时，checkItemInCart方法不会自动重新执行，导致addedToCart的值无法同步最新状态。
• 你没有对cartService中的items属性添加@tracked装饰器，或是修改items时没有触发跟踪更新，导致Ember无法感知到购物车数据的变化。
• 模板中调用@handleCartAction时传入的参数错误，没有加@前缀的item在当前作用域下不存在，可能导致加购逻辑执行异常。

解决方案 #

1. 重构为自动计算的Getter

不用手动维护@tracked的addedToCart变量，直接用Getter自动跟踪依赖，只要依赖的购物车数据或商品ID变化，就会自动重新计算值并同步到模板：

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

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

  // 自动跟踪依赖，无需手动触发更新
  get addedToCart() {
    return Boolean(this.cartService.items.findBy('id', this.args.item.id));
  }
}

2. 修复CartService的跟踪逻辑

确保购物车服务中的items属性添加了@tracked装饰器，并且修改数组时触发跟踪：

// app/services/cart.js
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class CartService extends Service {
  @tracked items = [];

  addItem(item) {
    // 不要直接用this.items.push(item)，普通数组的内部变更不会被@tracked检测到
    // 方式1：展开生成新数组赋值，触发跟踪
    this.items = [...this.items, item];
    // 方式2：使用@tracked-built-ins提供的TrackedArray，支持直接调用push/pop等方法
  }
}

3. 修复模板参数错误

去掉无用的did-insert调用，同时修正点击事件的传参：

<div class="card-container">
  <div class="card product-item">
    <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>价格：</strong>{{@item.price}}</span></p>
      <button type="button" class="btn btn-warning" {{on 'click' (fn @handleCartAction @item)}}
        disabled={{this.addedToCart}}>加入
        购物车</button>
    </div>
  </div>
</div>

修改完成后，只要购物车数据发生变化，addedToCart会自动更新，按钮的禁用状态也会实时同步，不需要跳转页面重新触发渲染。

内容的提问来源于stack exchange，提问作者Neil