Wie soll ich Daten zwischen Ember-Komponenten austauschen?

Meine Ember-App hat eine Route, die 2 verschiedene Komponenten und einen Controller mit einer index.hbs-Vorlage enthält.

So sieht es aus:

1) Ein Benutzer kann mehrere Filter aus den Dropdown-Listen der Filterkomponente auswählen.

2) Das DataGrid ist eine separate Komponente vom Filter

3 Ein Benutzer kann mehrere Zeilen aus dem DataGrid auswählen, indem er die Kontrollkästchen @ aktivier

4) Die Schaltfläche "Benutzerdefinierten Bericht erstellen" löst "sendAction" an den Controller der Route aus.

Diese Daten sind nicht modellspezifisch. Es handelt sich lediglich um temporäre Daten, die erforderlich sind, damit ich einen benutzerdefinierten Bericht erstellen kann.

Ember Best Practices sind "Daten runter / Aktionen rauf", und nach dem, was ich gelesen habe, sollten Sie nicht versuchen, von einem Controller aus auf eine Komponente zuzugreifen.

Das Problem ist jedoch, dassdie createCustomReport-Methode im Controller muss Zugriff auf alle Filter haben, die in der Filterkomponente ausgewählt wurden, sowie auf alle Zeilen, die in der Gitterkomponente überprüft wurden.

Mein erster Instinkt besteht darin, die Eigenschaften für die Komponente selbst festzulegen - sie muss ihren eigenen Status beibehalten - und dann einen Verweis auf die Komponente von der Steuerung abzurufen, um ihren Status abzurufen, bevor sie an die Berichtsfunktion übergeben wird.

Aber anscheinend ist das ein Nein-Nein.

Hier ist meine aktuelle Lösung:

Jedes Mal, wenn ich einen Filter auswähle, gibt es eine sendAction, die von der Komponente zum Controller sprudelt und eine benutzerdefinierte Eigenschaft für den Controller festlegt.

Auch jedes Mal, wenn ich ein Kontrollkästchen aus dem Raster auswähle, wird eine andere sendAction an die Komponente gesendet, sprudelt dann zum Controller und legt auf dem Controller eine benutzerdefinierte Eigenschaft für ausgewählte Rasterzeilen fest.

Wenn ich dann auf "createCustomReport" klicke, hat die im Controller ausgelöste Methode Zugriff auf die Eigenschaften, die ich zuvor festgelegt habe, da sich alle auf dem Controller befinden.

So sieht es ungefähr so aus:

import Ember from 'ember';

export default Ember.Controller.extend({

    myFirstFilter: undefined,
    mySecondFilter: undefined,

    actions: {
        createCustomReport() {
            // do something with all those component properties you've been setting
        },

        // These are triggered by the sendAction on the respective component
        firstFilterMethod(myProperty1) {                
            this.set('myFirstFilter', myProperty1.name);
        },

        secondFilterMethod(myProperty2) {               
            this.set('mySecondFilter', myProperty2.name);
        },

        ... etc...


    }
});

Hier ist mein Problem mit diesem

Ich greife nicht direkt vom Controller auf die Komponenten zu, sondern setze mithilfe des "Actions Up" -Prinzips Eigenschaften für den Controller, die spezifisch für die Ansicht sind.

ch komme aus einem Sencha ExtJS-Hintergrund, in dem Controller auf ihre Ansichten verweisen, und finde das sehr seltsa

Wenn ich keine Verweise auf Komponenten erhalte, sollte ich meinen Controller von seinen Ansichten entkoppeln. Da sich jedoch alle Eigenschaften, die ich einstelle, normalerweise in der Ansicht befinden, wird der Controller zueven mehr gekoppelt zur Ansicht als es wäre, wenn ich nur einen Verweis auf die Komponente bekommen würde.

Ist dies eine bewährte Methode in Ember oder gibt es für mich eine bessere Möglichkeit, die Daten aller dieser separaten Komponenten abzurufen, um die createCustomReport-Methode auszulösen?

Antworten auf die Frage(2)

Ihre Antwort auf die Frage