Ember: события вложенных компонентов, пузырящиеся

Я создал набор вложенных компонентов.

Код здесь: 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();
    }
  }
});

То, что я хочу достичь, состоит в том, чтобы пузырить события следующим образом:

Level3Component -> Level2Component -> Level1Component -> ApplicationController

К сожалению, я не могу обрабатывать события внутри любого из компонентов; событие запустилось до ApplicationController.

Есть ли способ принудительно активировать действия компонентов для всей иерархии компонентов, так что я показываю это предупреждение 4 раза (после добавления this.sendAction, конечно)?

Еще раз, вот код, с которым вы можете играть: http://emberjs.jsbin.com/hasehija/2/edit.

Ответы

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

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