Ember senden Aktion von einer Komponente zur anderen

Question

In meiner Ember App habe ich eine Elternkomponente my-section.hbs wie unten definiert; in meinem Maßstab Komponente

{{#my-scale}} 
{{my-field}} 
{{/my-scale}} 

nun in my-Bereich, habe ich

{{my-textfield label=fldName key-up="onFieldChange"}} 

Meine Frage ist, wie kann ich den Zugang zu onFieldChange bekommen?

Answer 1

Sie müssen sendAction() bei jeder Ebene verwenden, die Sie aufblasen möchten. In diesem Fall müssen Sie also zweimal blubbern, um von myTextfield zu myField zu myScale zu gelangen.

// templates/my-section.hbs 
    {{#my-scale}} 
    {{my-field}} 
    {{/my-scale}} 

// component/myTextfield.js 
export default Ember.Component.extend({ 
    actions: { 
    onFieldChange() { 
     this.sendAction('onFieldChange'); 
    } 
    } 
}); 

// component/myField.js 
export default Ember.Component.extend({ 
    actions: { 
    onFieldChange() { 
     this.sendAction('onFieldChange'); 
    } 
    } 

// component/myScale.js 
export default Ember.Component.extend({ 
    actions: { 
    onFieldChange() { 
     // do something 
    } 
    } 
}); 

Alternativ betrachten auf der Strecke etwas wie ember-route-action-helper und unter Angabe Ihrer Aktionen verwenden.

Answer 2

Ich würde dieses Problem angehen, indem die Aktion bereitstellen, die my-field aufrufen wird. Sie können dies tun, eine durch Closure Action

Da ein „Block“ Komponente (wie my-scale Variablen zu seinem Block zur Verfügung stellen kann (wo my-field ist) die Aktion ergeben können auf key-up

// my-field.hbs 
{{yield (action 'some-action-to-invoke-on-key-up')}} 

rufen und dann passieren in das Feld

{{#my-scale as |someAction|}} 
    {{my-field action=(action someAction)}} 
{{/my-scale}} 

, die Sie dann an das key-up Ereignis binden kann

{{my-textfield label=fldName key-up=(action someAction)}} 

Dies ist IMO ein bisschen einfacher als sprudelnde regelmäßige Aktionen; Sie können die Funktion stattdessen als Funktion übergeben und sie einfach wie eine normale Funktion aufrufen (oder an ein Ereignis binden)

Ich habe eine kleine Demo zusammengestellt, damit Sie sie in Aktion sehen können here.