sendAction on stack components, controller actions

1

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

2

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.

application.hbs

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

modal-box.hbs

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

modal-button.hbs

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

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

modal-button.js

App.ModalButtonComponent = Ember.Component.extend({
  click: function() {
      this.sendAction("action");
  }
});

modal-box.js

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

controllers/application.js

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?

2 Likes
3

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 - #2 by tarasm

Thanks!

P.S. You’ve a cool website (http://embersherpa.com/)

4

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