Binding-Controller-Objekt zu einer Komponente in Ember

Question

Ich versuche, eine modale Box-Komponente in Ember zu bauen. Die modale Box hat zwei Standardtasten, "Schließen" und "Speichern". Ich wollte Controller-Aktion an diese Komponente übergeben, so dass beim Klicken auf die Schaltfläche Speichern die Controller-Aktion aufgerufen wird, die übergeben wurde. Ich nenne meine Komponente wie:

{{#affi-modal-box title="Test title" modalId="createNewAnalyticsRunModal" controllerBinding=controller}}some message{{/affi-modal-box}} 

und meine Komponente:

AS.AffiModalBoxComponent = Ember.Component.extend({ 
attributeBindings: ['modelId','test'], 
    //this is the function that gets called when save button is clicked 
    onSaveButtonClick : function(){ 

     console.log(this.controllerFor('analysisTemplates'));//fails 
     console.log(this.get('controller'));//returns modal box component which I don't need 
    } 

});

Irgendwelche Ideen, wie ich das Controller-Objekt an die Komponente übergeben kann ??

Danke.

Answer 1

Die Art, wie Ember.Component arbeitet, ist zu anderen Teilen Ihrer Anwendung agnostisch zu sein, also eher, als einen Controller zu übergeben, auf dem Sie eine Aktion aufrufen möchten, wenn etwas in Ihrer Komponente passiert, Sie tun es eher auf diese Weise:

{{#affi-modal-box 
    title="Test title" 
    modalId="createNewAnalyticsRunModal" 
    action="actionNameOnTheController"}}some message{{/affi-modal-box}} 

Wie Sie können Sie das action Attribut auf den Aktionsnamen auf dem Controller, und dann in Ihrer Komponente, die Sie rufen Sie einfach this.sendAction('action'); sehen gesetzt, was auch immer Aktionsnamen auslösen Sie zuvor definiert:

AS.AffiModalBoxComponent = Ember.Component.extend({ 
    attributeBindings: ['modelId','test'], 
    //this is the function that gets called when save button is clicked 
    onSaveButtonClick : function(){ 
    this.sendAction('action'); 
    } 
}); 

Wenn nun onSaveButtonClick aufgerufen wird, sendet es die Aktion actionNameOnTheController an den Controller, der gerade abhört. Und das Beste von allem, ohne etwas über den Controller zu wissen. Dies ist die Art von Funktionalität, die Ember.Component in irgendeiner Weise wiederverwendbar macht.

Bitte sehen Sie hier eine simple demo des Konzepts erklärt.

Ich hoffe, es hilft.