Right approach to trigger action on entire component template


Is there a way to attach the {{action}} of a component to the entire component template? ie the wrapper element that ember will put the component into? I don’t see such a way in the docs.

Use case:

I’m using Semantic UI as a front end UI library in an ember app. I have a collection, which I have created as a component. Each item in the collection is a separate sub-component. But here is where I hit a problem.

To retain cascading styles, the entire component must be a direct descendent of the parent. ie: .parent.collection > .child.item { .... }

I realize I can set tagName and classNames to make it the child styled, but how can I also make the entire component clickable? I don’t want to I nest the {{action}} into a wrapper in the template because the extra level of nested element affects the styling due to the s structure above and I don’t wish to re-write the classes.


{{my-component action='foo'}}
click() {


Thank you sir.

I’m not sure why I didn’t find this in the docs: http://emberjs.com/api/classes/Ember.Component.html

Component doesn’t list this method, it extends View, which doesn’t list this method, which extends CoreView, which also doesn’t list this method … etc down the chain.

Do you happen to know if there are docs for this? - can all the actionable methods available to template be listed in the component as non-actionable (‘core’) methods?


Found it: http://guides.emberjs.com/v1.11.0/components/sending-actions-from-components-to-your-application/#toc_sending-a-primary-action