Verwendung der DModal API zum Rendern von Modal-Fenstern (auch Popups/Dialoge genannt) in Discourse

[Discourse]

Discourse 3.1.0.beta6 wird mit einer brandneuen \u003cDModal\u003e komponentenbasierten API ausgeliefert.

Dies ersetzt die alte, jetzt veraltete, controllerbasierte API. Wenn Sie vorhandene Modals mit den alten APIs haben, lesen Sie die Migrationsanleitung hier.

Ein Modal rendern

Modals werden gerendert, indem die Komponente \u003cDModal\u003e in eine Handlebars-Vorlage eingebunden wird. Wenn Sie noch keine geeignete Vorlage haben, besuchen Sie Using Plugin Outlet Connectors from a Theme or Plugin.

Ein einfaches Modal würde ungefähr so aussehen:

\u003cDButton
  @translatedLabel="Modal anzeigen"
  @action={{fn (mut this.modalIsVisible) true}}
/\u003e

{{#if this.modalIsVisible}}
  \u003cDModal @title="Mein Modal" @closeModal={{fn (mut this.modalIsVisible) false}}\u003e
    Hallo Welt, dies ist etwas Inhalt in einem Modal
  \u003c/DModal\u003e
{{/if}}

Der mut-Helper wird hier als HBS-einzige Methode zum Setzen eines Wertes verwendet. Sie könnten modalIsVisible auch mit einer anderen Standard-Ember-Methode festlegen.

Dieses Beispiel erstellt ein einfaches Modal wie dieses:

In eine Komponente einschließen

Bevor Sie weitere Komplexität hinzufügen, ist es normalerweise am besten, Ihr neues Modal in seine eigene Komponenten-Definition zu verpacken. Verschieben wir die \u003cDModal\u003e-Sachen in eine neue \u003cMyModal /\u003e-Komponente

{{! components/my-modal.hbs }}
\u003cDModal @title="Mein Modal" @closeModal={{@closeModal}}\u003e
  Hallo Welt, dies ist etwas Inhalt in einem Modal
\u003c/DModal\u003e

Die Einführung einer begleitenden .js-Komponentendatei ermöglicht es Ihnen, komplexere Logik und Zustände einzuführen.

Um die neue Komponente zu nutzen, aktualisieren Sie die Aufrufstelle, um darauf zu verweisen, und stellen Sie sicher, dass ein @closeModal-Argument übergeben wird.

\u003cDButton
  @translatedLabel="Modal anzeigen"
  @action={{fn (mut this.modalIsVisible) true}}
/\u003e

{{#if this.modalIsVisible}}
  \u003cMyModal @closeModal={{fn (mut this.modalIsVisible) false}} /\u003e
{{/if}}

Einen Footer hinzufügen

Viele Modals haben eine Art Handlungsaufforderung. In Discourse befinden sich diese tendenziell am unteren Rand des Modals. Um dies zu ermöglichen, verfügt DModal über eine Reihe von „benannten Blöcken“ (named blocks), in die Inhalt gerendert werden kann. Hier ist das Beispiel aktualisiert, um zwei Schaltflächen im Footer aufzunehmen, von denen eine unsere Standard-DModalCancel-Schaltfläche ist.

\u003cDModal @title="Mein Modal" @closeModal={{@closeModal}}\u003e
  \u003c:body\u003e
    Hallo Welt, dies ist etwas Inhalt in einem Modal
  \u003c/:body\u003e
  \u003c:footer\u003e
    \u003cDButton class="btn-primary" @translatedLabel="Senden" /\u003e
    \u003cDModalCancel @close={{@closeModal}} /\u003e
  \u003c/:footer\u003e
\u003c/DModal\u003e

Ein Modal aus einem Nicht-HBS-Kontext rendern

Idealerweise sollten \u003cDModal\u003e-Instanzen aus einer Ember-Handlebars-Vorlage mithilfe der oben gezeigten deklarativen Technik gerendert werden. Wenn dies für Ihren Anwendungsfall nicht praktikabel ist (z. B. wenn Sie ein Modal aus Discurses Legacy-„raw-hbs“- oder „widget“-Rendering-Systemen auslösen müssen), kann dies durch das Injizieren des modal-Dienstes und den Aufruf von modal.show() erfolgen.

Stellen Sie sicher, dass Sie Ihr Modal wie oben beschrieben in seiner eigenen Komponente eingeschlossen haben. Lösen Sie das Modal dann aus, indem Sie eine Referenz auf Ihre Komponentenklasse an showModal übergeben:

import MyModal from "discourse/components/my-modal";

// (injizieren Sie den modalen Dienst an der relevanten Stelle)

// Fügen Sie diesen Aufruf hinzu, wann immer Sie das Modal öffnen möchten.
// Ein `@closeModal`-Argument wird Ihrer Komponente automatisch übergeben.
this.modal.show(MyModal);

// Optional: Übergeben Sie einen '`model`'-Parameter. Wird als `@model` an Ihre Komponente übergeben.
// Dies kann Daten sowie Aktionen/Callbacks für die Verwendung durch Ihr Modal enthalten.
this.modal.show(MyModal, {
  model: { topic: this.topic, someAction: this.someAction },
});

// `modal.show()` gibt ein Promise zurück, sodass Sie warten können, bis es geschlossen wird
// Es wird mit den an die `@closeModal`-Aktion übergebenen Daten aufgelöst
const result = await this.modal.show(MyModal);

Mehr Anpassbarkeit!

\u003cDModal\u003e verfügt über eine Reihe von benannten Blöcken und Argumenten. Argumente finden Sie in der interaktiven Styleguide und die Implementierung der d-modal-Vorlage finden Sie unter d-modal template implementation.

---

\u003csmall\u003eDieses Dokument wird versioniert - schlagen Sie Änderungen auf github vor.\u003c/small\u003e

\u003c!-- START DOCS ASSET MAP
[
{
"local_path": "/assets/dmodal-api-1.png",
"local_sha1": "8dfd8ffa18409fdcac56e95e0f37e3b2c81af61e",
"remote_short_url": "upload://9eKVimqNmM9Q4apSPWsWrImfmQt.png"
},
{
"local_path": "/assets/dmodal-api-2.png",
"local_sha1": "9e6b3ae3a40c9934fa89cea18d42a1138e9248d3",
"remote_short_url": "upload://yp2hfxwO9dNjAJtUnGU89azmz63.png"
}
]
END DOCS ASSET MAP –\u003e