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

[Discourse]

Discourse 3.1.0.beta6 wird mit einer brandneuen, komponentenbasierte API ausgeliefert: DModal.

Diese ersetzt die alte controllerbasierte API, die nun als veraltet gilt. Wenn Sie bestehende Modals mit den alten APIs haben, lesen Sie die Migrationsanleitung hier.

Ein Modal rendern

Modals werden gerendert, indem die Komponente DModal in eine Handlebars-Vorlage eingefügt wird. Wenn Sie noch keine geeignete Vorlage haben, lesen Sie hier weiter.

Ein einfaches Modal würde etwa so aussehen:

<DButton
  @translatedLabel="Show Modal"
  @action={{fn (mut this.modalIsVisible) true}}
/>

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

Der mut-Helper wird hier als HBS-einziger Weg 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 einpacken

Bevor Sie weitere Komplexität einführen, ist es normalerweise am besten, Ihr neues Modal in eine eigene Komponentendefinition zu verpacken. Verschieben wir die DModal-Sachen in eine neue Komponente MyModal.

{{! components/my-modal.hbs }}
<DModal @title="My Modal" @closeModal={{@closeModal}}>
  Hello world, this is some content in a modal
</DModal>

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 auf sie zu verweisen, und stellen Sie sicher, dass ein @closeModal-Argument übergeben wird.

<DButton
  @translatedLabel="Show Modal"
  @action={{fn (mut this.modalIsVisible) true}}
/>

{{#if this.modalIsVisible}}
  <MyModal @closeModal={{fn (mut this.modalIsVisible) false}} />
{{/if}}

Eine Fußzeile 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’, in denen Inhalte gerendert werden können. Hier ist das Beispiel aktualisiert, um zwei Schaltflächen in der Fußzeile einzufügen, von denen eine unsere Standard-DModalCancel-Schaltfläche ist.

<DModal @title="My Modal" @closeModal={{@closeModal}}>
  <:body>
    Hello world, this is some content in a modal
  </:body>
  <:footer>
    <DButton class="btn-primary" @translatedLabel="Submit" />
    <DModalCancel @close={{@closeModal}} />
  </:footer>
</DModal>

Ein Modal aus einem Nicht-HBS-Kontext rendern

Idealerweise sollten DModal-Instanzen aus einer Ember Handlebars-Vorlage mit der oben gezeigten deklarativen Technik gerendert werden. Wenn dies für Ihren Anwendungsfall nicht möglich ist (z. B. wenn Sie ein Modal aus Discoures alten ‘raw-hbs’- oder ‘widget’-Rendering-Systemen auslösen müssen), können Sie dies tun, indem Sie den modal-Dienst injizieren und modal.show() aufrufen.

Stellen Sie sicher, dass Sie Ihr Modal in eine eigene Komponente eingepackt haben, wie oben beschrieben. Lösen Sie dann das Modal aus, indem Sie eine Referenz Ihrer Komponenteklasse an showModal übergeben:

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

// (injizieren Sie den modalen Dienst an der entsprechenden 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. Dieser wird als `@model` an Ihre Komponente übergeben.
// Dies kann Daten und auch Aktionen/Callbacks für 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 Daten aufgelöst, die an die `@closeModal`-Aktion übergeben wurden.
const result = await this.modal.show(MyModal);

Mehr Anpassungsmöglichkeiten!

DModal verfügt über eine Reihe von benannten Blöcken und Argumenten. Schauen Sie sich die interaktive Styleguide für Argumente und die d-modal-Vorlagenimplementierung für benannte Blöcke an.

---

Dieses Dokument ist versioniert - schlagen Sie Änderungen auf GitHub vor.