Ember: nested components events bubbling

Question

I've created a set of nested components.

The code is here: http://emberjs.jsbin.com/hasehija/2/edit.

HTML:

{{#level-1}}
    {{#level-2}}
      {{#level-3}}
        <button {{action 'handleAction'}}>
          Click me (yielded)
        </button>
      {{/level-3}}
    {{/level-2}}
 {{/level-1}}

JS:

App.ApplicationController = Ember.Controller.extend({
  actions: {
    handleAction: function() {
      alert('Handled in ApplicationController');
    }
  }
});

App.Level1Component = Ember.Component.extend({
  actions: {
    handleAction: function() {
      alert('Handled in Level 1');
    }
  }
});

App.Level2Component = Ember.Component.extend({
  actions: {
    handleAction: function() {
      alert('Handled in Level 2');
    }
  }
});

App.Level3Component = Ember.Component.extend({
  actions: {
    handleAction: function() {
      alert('Handled in Level 3');
      this.set('action', 'handleAction');
      this.sendAction();
    }
  }
});

What I want to achieve is to bubble the events in the following way:

Level3Component -> Level2Component -> Level1Component -> ApplicationController

Unfortunately, I cannot handle the events inside any of the components; the event bubbled up to ApplicationController.

Is there a way to force Components' actions to bubble over the whole hierarchy of components, so that I have the alert shown 4 times (after adding this.sendAction of course)?

Once again, here's a code that you can play with: http://emberjs.jsbin.com/hasehija/2/edit.

Answer 1

Based on your example, you must define the component targetObject property as:

App.Level3Component = Ember.Component.extend({
  action: 'handleAction',
  targetObject: Em.computed.alias('parentView'),  
  actions: {
    handleAction: function() {
      alert('Handled in Level 3');
      this.sendAction();
    }
  }
});

http://emberjs.jsbin.com/hasehija/5/edit

Answer 2

If I understand the question correctly, this question is related and the answer shows how you can do it from the template--you may be able to do:

{{#level-1}}
    {{#level-2 targetObject=view}}
      {{#level-3 targetObject=view}}
        <button {{action 'handleAction'}}>
          Click me (yielded)
        </button>
      {{/level-3}}
    {{/level-2}}
 {{/level-1}}

Handy if you don't control the inner components or don't want to modify them directly as the other answer does.

I think the reason you say view here instead of parentView in the above answer is due to Handlebars treating view as a special keyword...in any case, using parentView in the template didn't work (which puzzles me, but whatever).