sendAction on stack components, controller actions


Is there a way to call controller action on stack components (nested hierarchy of components) via sendAction? For exemple, I have modal compoment with some buttons compoments and I would like exec an action on a controller who called. I haven’t taken a look at the source yet. Thanks for your help


Components are designed to be isolated so you’d have to explicitly connect each of the components to its context. Let’s say you have 3 stacked templates.


{{modal-box onCancel="cancel" onAccept="accept"}}


{{#modal-button action="accept"}}Accept{{/modal-button}}
{{#modal-button action="cancel"}}Cancel{{/modal-button}}


<input type="button">{{this}}</input>

In your component code, you’ll need to fire actions that will bubble up to the context.


App.ModalButtonComponent = Ember.Component.extend({
  click: function() {


App.ModalBoxComponent = Ember.Component.extend({
    accept: function() {
        this.sendAction( "accept" );
    cancel: function() {
       this.sendAction( "cancel" );


App.ApplicationController = Ember.Controller.extend({
  actions: {
     accept: function() {
        # do whatever you gotta do when accepted
     cancel: function() {
        # do whatever you gotta do when cancelled

Is this what you were trying to do?


Ya! I also did something similar :slight_smile: So I upvote “Some ideas I had about composable/reusable components” :slight_smile: sendAction on stack components, controller actions


P.S. You’ve a cool website (


Thanks, I wish I had more time to work on it.