Component action not bubbling to the route

1

Still having an issue sending an action in a nested component to a higher up route. I have a component template, product-item

<button onclick={{action (action "addItem" product)}}>Choose</button>

which is nested in another template, products-list, as follows:

{{#each products as |product|}}
  {{product-item product=product addItem="addItem"}}
{{/each}}

On the product-item.js file I have this action:

addItem: function(product) {
  this.sendAction('addItem', product);
}

And on the route :

actions: {
  addItem: function(product) {
    ...
  }

But I when I click the button I get had no action handler defined error. I want it to bubble to the route so I can access the store. Any idea what the issue is? The action reaches the product-item component action handler, when I stick a debugger in there it picks it up.

1 Like
2

I don’t know the answer, seems like it should work. Just an observation, is

{{action (action "addItem" product)}} a typo? shouldn’t it be {{action "addItem" product}} ?

AFAIK it should go bubble controller to route and then through the route hierarchy, if you put an action handler on the controller is it invoked?

3

Adding to Neil’s reply, I think instead of this:

<button onclick={{action (action "addItem" product)}}>Choose</button>

You really want this:

<button {{action "addItem" product}}>Choose</button>

Click is the default event; if you wanted to listen for a different event, the on would actually go inside the {{action}}, e.g.:

<button {{action "addItem" product on="mouseUp"}}>Choose</button>

4

You can use this.sendAction('deleteAction'); and bubble yourself. See:

https://github.com/broerse/ember-cli-blog/blob/master/app/components/blog-post-edit.js https://github.com/broerse/ember-cli-blog/blob/master/app/components/blog-post.js https://github.com/broerse/ember-cli-blog/blob/master/app/templates/post.hbs https://github.com/broerse/ember-cli-blog/blob/master/app/routes/posts.js