Ember Data父组件数据变更未在UI上同步的问题

看起来你遇到了Ember里很常见的数据变更未触发UI同步的问题，结合你的代码场景，我整理了几个关键的排查和修复方向：

1. 修复计算属性的依赖追踪 #

你的accordionPanels计算属性必须明确声明依赖项，Ember才能在section.myRows变化时自动重新计算这个属性。从你给出的代码片段看，这个计算属性大概率缺少了依赖声明，导致Ember无法感知数据变化。

修改后的代码应该是这样：

import { computed } from '@ember/object';

// ...

accordionPanels: computed('section.myRows.[]', function() {
  let accordionPanels = [];
  let myRows = this.get('section.myRows');
  
  myRows.forEach((myRow) => {
    accordionPanels.pushObject({
      panel: {
        name: myRow.rowId,
        props: { section: myRow } // 这里根据你实际要传递的section内容调整
      }
    });
  });
  
  return accordionPanels;
})

• 'section.myRows.[]'用来监听数组的新增/删除操作；如果需要监听数组内每个元素的属性变化（比如rowId更新），可以改成'section.myRows.@each.rowId'。

2. 确保myRows是Ember可观察数组 #

如果section.myRows是普通的JavaScript数组，Ember无法追踪它的变化。要确保myRows是用Ember.A()创建的数组，或者是Ember Data返回的RecordArray（这类数组本身就是可观察的）。

如果是你手动初始化的数组，要这样操作：

// 初始化时用Ember.A创建可观察数组
this.set('section.myRows', Ember.A([/* 初始数据 */]));
// 后续添加元素用pushObject，而不是原生push
this.get('section.myRows').pushObject(newRow);

3. 检查子组件的变更响应逻辑 #

如果my-accordion或my-details-row是自定义组件，需要确保它们能响应传入属性的变化：

• 在组件中可以使用didUpdateAttrs钩子，当accordionPanels变化时重新处理内部状态：

// my-accordion组件内部
didUpdateAttrs(attrs) {
  this._super(...arguments);
  // 判断accordionPanels是否发生变化
  if (attrs.oldAttrs?.accordionPanels !== attrs.newAttrs?.accordionPanels) {
    // 这里可以做面板重新初始化等操作
    this.setupPanels();
  }
}

• 同时确保组件模板中用Ember的{{#each}}助手循环渲染accordionPanels，它会自动追踪数组变化并更新UI。

4. 兜底方案：手动触发属性变更通知 #

如果以上方法都没解决问题，可以在数据变更后手动通知Ember更新accordionPanels：

// 当section.myRows完成变更后调用
this.notifyPropertyChange('accordionPanels');

不过这只是临时方案，建议优先找到依赖追踪的问题根源，避免依赖手动触发。

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