Ember.js：表格选中行变化时如何更新关联组件？

问题根源 #

1. 参数类型不匹配：控制器向MultiGiftAllocationForm传递的是数组this.selectedGifts，但组件定义的giftsNumber参数为number类型，模板中还错误使用@giftsNumber.length，导致逻辑混乱。
2. 数组可变操作未触发跟踪：使用splice、push修改selectedGifts数组时，Ember的@tracked仅监听数组引用变化，内容修改不会触发组件重渲染。

修复步骤 #

步骤1：修正参数传递与组件定义

组件仅需选中礼品的数量，直接传递数组长度即可：

• 控制器模板修改：

  <GiftEntry::MultiGiftAllocationForm
    @giftsNumber={{this.selectedGifts.length}}
  />
  

• MultiGiftAllocationForm组件模板修改：
  直接使用传递的数值，无需再取.length：

  <button class="btn btn-primary ml-md" type="button">
    Update {{@giftsNumber}} gifts
  </button>
  

• MultiGiftAllocationForm组件TS保持不变：
  参数类型仍为number，符合当前传递的数值类型：

  import Component from '@glimmer/component';
  
  type Args = {
    giftsNumber: number;
  };
  
  export default class MultiGiftAllocationForm extends Component<Args> {}
  

步骤2：改用不可变方式更新数组

修改控制器的updateCheckedRows方法，通过创建新数组触发@tracked的引用变更检测：

@action
updateCheckedRows(row: MockDataAllocationRow, evt: Event): void {
  evt.preventDefault();

  const isSelected = this.selectedGifts.some(g => g.id === row.id);

  if (isSelected) {
    // 移除选中项，生成新数组
    this.selectedGifts = this.selectedGifts.filter(g => g.id !== row.id);
    set(row, 'isChecked', false);
  } else {
    // 添加选中项，生成新数组
    this.selectedGifts = [...this.selectedGifts, row];
    set(row, 'isChecked', true);
  }

  this.hasOneChecked = this.selectedGifts.length === 1;
  this.hasMultipleChecked = this.selectedGifts.length > 1;
}

核心逻辑说明 #

Ember的@tracked装饰器仅对数组的引用变化做出响应，使用filter、扩展运算符（...）创建新数组，会改变selectedGifts的引用地址，从而触发控制器属性更新，传递给子组件的参数也会同步更新，最终实现按钮文本的动态渲染。同时修正参数类型后，避免了类型不匹配的潜在问题。

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