Ember: zdarzenia komponentów zagnieżdżonych propagacji

Question

Stworzyłem zestaw zagnieżdżonych komponentów. Kod:

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(); 
    } 
    } 
}); 

Co chcę osiągnąć jest bańka wydarzenia w następujący sposób:

Level3Component -> Level2Component -> Level1Component -> ApplicationController

Niestety, nie mogę obsługiwać zdarzenia wewnątrz dowolnego komponentu; impreza była transmitowana do ApplicationController.

Czy istnieje sposób, aby zmusić działania Komponentów do bańki na całej hierarchii komponentów, tak, że mam alert pokazany 4 razy (po dodaniu this.sendAction oczywiście)?

Jeszcze raz, oto kod, na który można zagrać: http://emberjs.jsbin.com/hasehija/2/edit.

Answer 1

opartej na przykład, należy zdefiniować właściwość komponentu targetObject jak:

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

Jeśli dobrze rozumiem pytanie, this question is related a odpowiedź pokazuje, w jaki sposób można to zrobić z szablonu --może być możliwe:

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

Poręczne, jeśli nie sterujesz wewnętrznymi komponentami lub nie chcesz t, aby zmodyfikować je bezpośrednio, jak robi to inna odpowiedź.

Myślę, że powodem mówisz view tutaj zamiast parentView w powyższej odpowiedzi wynika Kierownice leczenia view jako specjalnego hasła ... w każdym razie, używając parentView w szablonie nie działa (co mnie zastanawia, ale cokolwiek).