Ember nested component action not bubbling

Question

Problem is if I yield the content of the nested component action bubbles up to controller and then routes.

But if the nested content is not yielded action can be handled by father component and it does not bubble up to controller of father's component template and up through the routes. Also it does not throw anything if unhandled by father component.

Hope this bin will make it clearer

Question is: how can I from foo-biz send an action to the application-controller and routes?

Answer 1

I know this is a year later, and I'm sure we're all on a number of different Ember versions (I am on Ember-2.2). Anyway, I had a situation where I created a component that accepts a dynamically-named action that is happily attached to one of the embedded html elements in the component's hbs.

{{some-component actionName="doThis" ...}}

...and the some-component.hbs looks like this:

<button type="button" {{action actionName}}>The doThis Button</button>
<p>Yadda Yadda Yadda</p>
<p>Yadda Yadda Yadda</p>

Anyway, my expectation would be that my action call, doThis would bubble up to my controller and route where I could handle this behaviour and reuse my component all over my application...that was however not the case.

Currently my fix is this, pass the target=this on some-component. This forces my doThis action to bubble up to the controller and route.

{{some-component actionName="doThis" target=this ...}}

Forgive my naive solution, as I do not truly believe this is the correct way to address this, but this has got me working for the moment. I will update with any new findings.

I used Ember-2.2 Component source to help figure this out.

And also some of the elements from this question...

Answer 2

You need to explicitly bubble up actions from the components, so you need to this.sendAction in your parent component, and bind the action in the template: http://jsbin.com/zomoxo/edit?html,js,console,output