Ember: verschachtelte Komponenten Ereignisse sprudeln

Question

Ich habe eine Reihe von verschachtelten Komponenten erstellt.

Der Code ist hier: 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(); 
    } 
    } 
}); 

Was will ich die Ereignisse in der folgenden Art und Weise ist zu sprudeln erreichen:

Level3Component -> Level2Component -> Level1Component -> ApplicationController

Leider kann ich nicht die Ereignisse in einer der Komponenten behandeln; das Ereignis sprudelte bis zu ApplicationController.

Gibt es eine Möglichkeit, die Aktionen von Components über die gesamte Komponentenhierarchie zu verteilen, so dass ich die Warnung 4 Mal anzeigen lasse (nach dem Hinzufügen von this.sendAction natürlich)?

Noch einmal, hier ist ein Code, mit dem Sie spielen können: http://emberjs.jsbin.com/hasehija/2/edit.

Answer 1

Basierend auf Ihrem Beispiel, müssen Sie die Komponente targetObject Eigenschaft definieren als:

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

Wenn ich die Frage richtig, this question is related und die Antwort zeigen verstehen, wie man es aus der Vorlage tun - können Sie möglicherweise tun:

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

Handlich, wenn Sie nicht die inneren Komponenten steuern oder nicht wan t sie direkt zu ändern, wie es die andere Antwort tut.

Ich denke, der Grund, warum Sie view hier statt parentView in der obigen Antwort sagen, ist aufgrund Lenker view als besonderes Schlüsselwort ... auf jeden Fall zu behandeln, parentView in der Vorlage nicht funktioniert (was mir ein Rätsel, aber was auch immer).