sendAction on stack components, controller actions

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