Aufruf einer Funktion an einer Komponente vom Controller

Question

Ich mag Ihre Meinung zu diesem Muster. Ich wollte in der Lage sein, Fokus-Funktion auf eine Komponente von meinem Controller, die Art, wie ich es implementiert war eine Referenz auf sich selbst durch eine Aktion auf dem Controller definiert dann rufen Sie die Methode darauf. Es funktioniert gut, frage mich nur, ob eine Art Anti-Muster sollte ich weg bleiben?

{{x-input bindingAction=(action "bindInput")}} 

<button {{action "focusOnInput">Focus on input</button> 

// x-input.js 
import Ember from 'ember'; 

export default Ember.Component.extend({ 

    init() { 
    this._super(); 
    if (!Ember.isNone(this.get('bindingAction')) { 
    this.get('bindingAction')(this) 
    } 
    } 

    focus() { 
    // focus on component. 
    } 

}); 


// controller.js 
import Ember from 'ember'; 

export default Ember.Controller.extend({ 

actions: { 

    bindInput(input) { 
     this.set('input', input);  
    } 

    focusOnInput() { 
     this.get('input').focus();  
    } 

} 
}); 

Answer 1

Ja. Der Aufruf von Funktionen einer Komponente vom Controller ist anti-Pattern. Befolgen Sie immer die Strategie "Down" und "Actions Up". Erforderliche Daten sollten an Komponenten weitergegeben werden und Komponenten sollten Änderungen durch Senden von Aktionen kommunizieren.

Im Folgenden einige der Artikel es besser zu verstehen,
- https://emberigniter.com/getting-started-ember-cli-data-down-actions-up-tutorial/
- https://dockyard.com/blog/2015/10/14/best-practices-data-down-actions-up
- http://www.samselikoff.com/blog/data-down-actions-up/
- https://blog.embermap.com/passing-data-around-your-ember-application-c4fe1e06e90

---

Wenn Sie es noch tun wollen, dann werde ich mit Diese Optionen, Hier ist die twiddle demonstrating

Controller/application.js

import Ember from 'ember'; 
export default Ember.Controller.extend({ 
    appName: 'Ember Twiddle', 
    componentRef:null, 
    actions:{ 
    registerComponent(componentRef){ 
     this.set('componentRef',componentRef); 
    }, 
    deregisterComponent(){ 
     this.set('componentRef',null); 
    }, 
    callComponentMethod(){ 
     this.get('componentRef').sayHi(); 
     } 
    } 
}); 

Komponenten/my-component.js

import Ember from 'ember'; 
export default Ember.Component.extend({ 
    didInsertElement(){ 
    this.get('registerComponent')(this); 
    }, 
    willDestroyElement(){ 
    this.get('deregisterComponent')(); 
    this._super(...argument);  
    }, 
    sayHi(){ 
    alert(' Hi from component'); 
    } 

}); 

application.hbs

<h1 {{action 'callComponentMethod'}}>Welcome to {{appName}}</h1> 
<br> 
{{my-component registerComponent=(action 'registerComponent') deregisterComponent=(action 'deregisterComponent')}} 
{{outlet}}