Ember.js：如何结合可组合助手实践「数据向下、动作向上」？

嘿，刚接触Ember就尝试DDU模式和可组合助手，这思路挺棒的！咱们来拆解下你遇到的问题：

你碰到的「no action handler for: toggleToppings」错误，核心原因是子组件没法直接通过字符串名称调用父组件传入的动作，得用正确的方式引用或转发动作。这里给你两种实用的解决办法：

方法一：直接调用父组件传入的动作（最简方案） #

父模板的动作传递代码没问题，子组件模板里只要直接引用传入的动作属性就行，不用额外定义内部动作：

// 子组件模板
<div {{action this.toggleToppings}}>点击切换披萨配料</div>

对应的子组件JS（Glimmer组件）不需要额外逻辑，直接接收外部传入的动作即可：

import Component from '@glimmer/component';

export default class PizzaToppingsComponent extends Component {
  // 无需额外定义动作，this.args.toggleToppings就是父组件传过来的动作
}

注：Glimmer组件中，所有外部传入的属性（包括动作）都挂在this.args上，模板里可以直接用this.xxx来访问。

方法二：子组件内部定义动作，再转发父组件动作（适合需要额外逻辑的场景） #

如果需要在子组件里做一些预处理（比如加日志、校验状态），再触发父组件的动作，可以这么写：

子组件模板先绑定内部动作：

// 子组件模板
<div {{action "togglePizza"}}>点击切换披萨配料</div>

子组件JS里定义内部动作，再调用父组件传入的动作：

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

export default class PizzaToppingsComponent extends Component {
  @action
  togglePizza() {
    // 这里可以加子组件专属逻辑，比如打印日志
    console.log("用户触发了配料切换操作");
    // 调用父组件传过来的toggleToppings动作
    this.args.toggleToppings();
  }
}

这样调整后，动作就能正常从子组件传递到父组件，完美契合「数据向下、动作向上」的模式啦～

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