Vor kurzem wurde Ember.PromiseProxyMixin zu den Ember-Modulen im Kern von Discourse hinzugefügt.
Es ist ein sehr nützliches Ember-Mixin, das es ermöglicht, asynchrone Anfragen zu stellen und einfach mit Promises innerhalb von Ember-Komponenten zu arbeiten. Man kann es sich wie React Suspense für Ember vorstellen. Das Potenzial für die Entwicklung von Themes und Plugins in Discourse ist enorm.
Hier ist die offizielle Ember-Dokumentation für Ember.PromiseProxyMixin.
Ich gebe ein einfaches Beispiel, wie dieses Mixin innerhalb eines Discourse-Themes verwendet werden kann. Nehmen wir an, Sie möchten aus irgendeinem Grund in der Komponente topic-list-item das Avatar-Bild des Beitragenden gestalten, wenn dieser ein Mitarbeiter ist. In diesem Fall muss der Avatar einen anderen Rahmen haben.
Irgendwo in topic-list-item.js(.es6) müssen Sie Folgendes tun:
- Importieren Sie
EmberObjectundPromiseProxyMixinund erweitern SieEmberObjectmitPromiseProxyMixin.
import EmberObject from "@ember/object";
import PromiseProxyMixin from "@ember/object/promise-proxy-mixin";
const PromiseObject = EmberObject.extend(PromiseProxyMixin);
// Sie können eine benutzerdefinierte Memoize-Funktion verwenden, um mehrere Anfragen für dieselben Benutzer zu verhindern
const getUser = memoize(username => ajax(`/u/${username}`).then(data => data));
- Anschließend müssen Sie diese berechneten Eigenschaften erstellen:
// Berechnetes Promise
@discourseComputed("topic")
posterPromise(topic) {
const { user } = topic.posters[0];
return getUser(user.username);
},
// Diese CP umschließt das Promise mit `PromiseObject`
@discourseComputed("posterPromise")
posterProxy() {
const promise = this.get("posterPromise");
return promise && PromiseObject.create({ promise });
},
posterData: reads("posterProxy.content.user"),
@discourseComputed("posterData")
isStaff() {
const posterData = this.get("posterData");
if (!posterData) return false;
const { groups = [] } = posterData;
// Um zu prüfen, ob der Benutzer ein Mitarbeiter ist, müssen wir überprüfen,
// ob der Benutzer einer Mitarbeitergruppe angehört
return groups.some(({ name }) => name === "staff");
}
Und in der Vorlage topic-list-item.hb(r|s) hätten Sie etwas wie folgt:
{{#if posterProxy.isFulfilled}}
{{#if isStaff}}
// Führen Sie Ihre Anpassungen durch
{{/if}}
{{/if}}
Sie können isPending verwenden, um möglicherweise einen Ladebalken anzuzeigen.
Ich hoffe, dieses nicht ganz nützliche Beispiel hilft Ihnen zu verstehen, wie das Mixin funktioniert, und vielleicht finden Sie eine Möglichkeit, es in der Entwicklung Ihres Themes/Plugins zu verwenden.
