Action from nested component to parent component


#1

I can’t get this to work. In a route template I have two components, x-parent and a nested x-child component.

{{#x-parent}}
  {{x-child}}
{{/x-parent}}

Whenever I send an action from x-child, I want it to be caught by x-parent.

//x-child
this.sendAction('activateMe', this);

//x-parent
actions: function() {
  activateMe: function(child) {
    console.log('activate ' + child.get('name'));
  }
}

I tried messing around with parentView but no results.


#2

The context inside {{#x-parent}} in your example not the parent component, but rather the surrounding controller.

If you were to do {{x-parent}} it would be what you want. Or you could {{yield this}} inside the parent’s template. and do {{#x-parent as |parent|}}, like this. I suppose it depends how much you want to couple the parent and child, because like you say, you could use parentView


#3

Thank you, that did it! It’s quite a confusing topic and there is a lot debate about the direction Ember should go. For now, this will do.