Reassign component target to sibling component


#1

Is there a way to send component actions to a sibling component in the same view instead of to the controller?

Here’s the use-case I’m dealing with: I have a custom keyboard component that I’d like to send keypress events/actions to a text field.


#2

You can’t, the only way to get the other component to listen for events, is to listen on attribute changes.

Controller:

this.set('isCentered', true)

Component

isCenteredBinding: 'controller.isCentered',
onIsCenteredChange: function () {
    //do your thing
}.observes('isCentered'),

#3

I don’t know of a way to do this. I’ve used a custom implementation of sendAction() to send actions to things other than the containing controller, like the containing view. A similar thing would work for sibling components.

In your component:

// Bind this to the desired target.
customActionTarget: null,

_sendAction: function(action, context) {
  var target = this.get('customActionTarget');
  var actionName;
  if (target) {
    actionName = this.get(action);
    if (actionName) {
      target.send(actionName, context);
    }
  }
  else {
    // Do the default.
    this.sendAction.apply(this, arguments);
  }
},

actions: {

  somethingHappened: function() {
    this._sendAction('something');
  }

}