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

[Discourse]

Discourse 3.1.0.beta6 wird mit einer brandneuen \u003cDModal\u003e Komponenten-basierten API ausgeliefert.

Diese ersetzt die alte, jetzt veraltete, Controller-basierte API. Wenn Sie bestehende Modals mit den alten APIs haben, lesen Sie die Migrationsanleitung hier.

Ein Modal rendern

Modals werden gerendert, indem die \u003cDModal\u003e-Komponente 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="Show Modal"
  @action={{fn (mut this.modalIsVisible) true}}
/\u003e

{{#if this.modalIsVisible}}
  \u003cDModal @title="My Modal" @closeModal={{fn (mut this.modalIsVisible) false}}\u003e
    Hello world, this is some content in a modal
  \u003c/DModal\u003e
{{/if}}

Der mut-Helper wird hier als hbs-einzige Methode verwendet, um einen Wert festzulegen. Sie könnten modalIsVisible auch mit jeder anderen Standard-Ember-Methode festlegen.

Dieses Beispiel erstellt ein einfaches Modal wie dieses:

In eine Komponente einschließen

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

{{! components/my-modal.hbs }}
\u003cDModal @title="My Modal" @closeModal={{@closeModal}}\u003e
  Hello world, this is some content in a 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 Sie ein @closeModal-Argument übergeben.

\u003cDButton
  @translatedLabel="Show Modal"
  @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 einzuschließen, von denen eine unsere Standard-DModalCancel-Schaltfläche ist

\u003cDModal @title="My Modal" @closeModal={{@closeModal}}\u003e
  \u003c:body\u003e
    Hello world, this is some content in a modal
  \u003c/:body\u003e
  \u003c:footer\u003e
    \u003cDButton class="btn-primary" @translatedLabel="Submit" /\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 mit 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-Rendering-Systemen „raw-hbs“ oder „widget“ 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 Ihrer Komponentenklasse an showModal übergeben:

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

// (injizieren Sie den modal-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 können Sie einen '`model`'-Parameter übergeben. Wird als `@model` an Ihre Komponente übergeben.
// Dies kann Daten sowie Aktionen/Callbacks enthalten, die Ihr Modal verwenden kann.
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. Informationen zu Argumenten finden Sie im interaktiven Styleguide und zu benannten Blöcken in der d-modal-Vorlagenimplementierung.

---

\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