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}}
            


        

Answer 1

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).

Answer 2

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