Ember.js中如何将控制器计算结果传回组件？

这种需求完全可行，你遇到空列表的问题，大概率是变量传递的时机或者响应式处理没做好。下面给你具体的实现方式和常见坑的排查点：

核心实现思路：组件传递回调函数给控制器 #

组件把用于接收结果的回调函数传给控制器，控制器完成计算后直接调用这个回调，把结果传回组件，这是Ember里组件和控制器通信的常用方式。

1. 组件端代码 #

组件模板（my-component.hbs）

<button {{on "click" (fn this.triggerCalculation)}}>开始计算</button>
{{#if this.computedResult}}
  <p>计算结果：{{this.computedResult}}</p>
{{/if}}

组件JS（app/components/my-component.js）

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

export default class MyComponent extends Component {
  @tracked computedResult = []; // 用tracked确保响应式更新

  @action
  triggerCalculation() {
    // 模拟要传给控制器的原始数据
    const rawData = [10, 20, 30];
    // 调用控制器的计算动作，同时传入回调函数
    this.args.controller.doCalculation(rawData, (result) => {
      // 接收控制器传回的结果，更新组件内的响应式属性
      this.computedResult = result;
    });
  }
}

2. 控制器端代码（app/controllers/my-controller.js） #

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class MyController extends Controller {
  @action
  doCalculation(rawData, callback) {
    // 这里写你的计算逻辑，同步异步都可以
    // 同步计算示例
    const result = rawData.map(item => item * 3);
    
    // 异步计算示例（比如调用API）
    // const result = await fetch('/api/process-data', {
    //   method: 'POST',
    //   body: JSON.stringify(rawData)
    // }).then(res => res.json());

    // 计算完成后调用回调，把结果传回组件
    callback(result);
  }
}

空列表问题的常见排查点 #

• 异步计算未处理：如果你的计算是异步操作（比如API请求），直接同步读取变量的话，结果还没生成，自然是空列表。必须用回调或者Promise等待计算完成后再赋值。
• 响应式属性未正确标记：Glimmer组件里需要用@tracked标记要更新的属性，旧的Ember组件要用this.set()方法，不然属性变化不会触发组件渲染，看起来结果是空的。
• 回调函数未正确传递：检查组件是否把回调函数正确传给了控制器，有没有出现函数未定义、参数传递错误的情况。

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