So teilen Sie Knockout JS-Observables zwischen UI-Komponenten

Ich verstehe, wie man Eigenschaften einer UI-Komponente verwendet imports: {}undexports: {} teilt, wie zum Beispiel:

defaults: {
    exports: {
        shouldShowMessage: '${$.component}'
    }
}

Welches gibt den Komponentennamen in den Exporten zurück.

Aber wenn ich versuche, ein beobachtbares Knockout zu exportieren, ist es immer undefiniert:

defaults: {
    exports: {
        shouldShowMessage: '${$.shouldShowMessage}'
    }
}

...

setupKoBindings: function() {
    this.shouldShowMessage = ko.observable('Testing');
}

Um dieses Problem zu umgehen, werde ich ein Speichermodell erstellen, wie hier erläutert , aber ich würde es vorziehen, die Importe und Exporte zu verwenden.

Die Werte des Exportobjekts müssen in einen Namen und eine Eigenschaft einer UiComponent-Instanz aufgelöst werden, die beispielsweise durch ein ':' getrennt sind checkout.cart.total:title.
Der Exportzielname muss die UI-Komponente "Namespace" enthalten.

In Ihrem Beispiel setzen Sie den Wert auf eine Zeichenfolge, die in eine Eigenschaft der UiComponent aufgelöst wird, die die Exportquelle darstellt. Der Export ist undefiniert, wenn Sie ihn überprüfen, da dies kein gültiges Exportziel ist.

Hier ist ein Beispiel, das funktioniert:

defaults: {
    exportTarget: "foo.bar",
    exportTargetProperty: "showMessage",

    tracks: {
        shouldShowMessage: true
    },

    exports: {
        shouldShowMessage: '${$.exportTarget}:${$.exportTargetProperty}'
    }
}
...

Mit dem obigen Befehl wird der Wert der shouldShowMessageEigenschaft showMessagebei foo.barjeder Änderung des Werts mit dem vollständigen Namen in die Eigenschaft einer UiComponent kopiert .
Beachten Sie, dass dadurch die Zieleigenschaft nicht automatisch auch als KO beobachtbar wird. Dies muss explizit deklariert werden, wenn Wertänderungen KO auslösen sollen, um DOM-Knoten, die auf diese Eigenschaft zugreifen, erneut zu rendern.

Übrigens macht das Hinzufügen shouldShowMessagezum tracksObjekt es zu einem automatisch beobachtbaren Ko-es5. Die Verwendung eines wörtlichen ko.observable()Werks funktioniert auch.

Im obigen Beispiel sind die exportTargetund exportTargetPropertyin der konfiguriert defaults. Sie können auch als Teil der UiComponent-Optionen im JSON angegeben werden, was normalerweise sinnvoller ist, da dort die UiComponent-Hierarchie einschließlich der UiComponent-Namen definiert wird.

Abschließend möchte ich darauf hinweisen, dass ich persönlich der Meinung bin, dass Ihre Lösung, bei der ein Wertobjekt verwendet wird, um den Wert an die andere UI-Komponente zu übergeben, besser ist als die Verwendung von Exporten oder Importen. Nach meiner Erfahrung ist das Beibehalten des gemeinsamen Status im DOM oder in UiComponents in allen außer den einfachsten Fällen ein Rezept für Spaghetti-OOP.