Ember，将动作从模板传递到组件时没有动作处理程序

Question

我正在尝试将动作从路由传递到模板，然后传递到组件。

app/routes/application.js

  actions: {
    showModal(context) {
      console.log("This needs to be triggered" + context)
    },
  }

app/templates/application.hbs

{{some-component 
  showModal=showModal
}}

app/components/some-component/template.hbs

<button {{action "showModal" "The context for the action"}}>Press Me</button>

当运行这个。我收到一条错误消息

"had no action handler for: showModal"

虽然，当我在 templates/application.hbs 中包含操作而不将其传递给组件时，一切正常。只是在将动作传递给组件时。

app/templates/application.hbs

<button {{action "showModal" "The context for the action"}}>Press Me</button>

这行得通。我想在一个组件中调用这个动作。如何将此操作传递给组件？

Answer 1

在此上下文中，触发路由操作与来自控制器的触发操作略有不同。当您将动作从控制器或其他组件传递给组件时，您将其包装在动作助手中，如下所示：

{{some-component showModal=(action "showModal")}}

由于您尝试传递的动作存在于路由中，因此您需要使用控制器中的 send 方法来调用路由中的动作。你像这样将它传递到组件中：

{{some-component showModal=(action send "showModal")}}

这里有一个 twiddle 可以帮助将它们拼凑在一起。

Ember, No action handler when passing action from template to component