Ember: nested components events bubbling

components, ember.js, event-bubbling, events, javascript

Solution

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

Problem

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.

Original source