CODEWITHSUNDEEP
ember.js
Ronnie Wiesenhower
Ronnie Wiesenhower

Reputation: 153

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

I'm trying to pass an action from a route to a template and then a component.

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>

When running this. I get an error saying

"had no action handler for: showModal"

Although, when I include the action inside templates/application.hbs without passing it to a component everything works fine. It's just when passing the action to a component.

app/templates/application.hbs

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

This works. I want to call this action in a component though. How can I pass this action to the component?

Upvotes: 0

Views: 826

Answers (1)

stevenelberger
stevenelberger

Reputation: 1368

Firing route actions is a little bit different than firing actions coming from a controller in this context. When you pass in an action to a component from a controller or another component you wrap it in the action helper like so:

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

Since the action you're attempting to pass in lives in a route, you need to have to utilize the send method from the controller to call the action in the route. You pass it into the component like so:

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

Here's a twiddle that helps piece it all together.

Upvotes: 2

Related Questions