Zum Hauptinhalt springen

Umgang mit Ereignissen

Jutro ist so konfiguriert, dass Ereignisse aus Ihrer Jutro-App verarbeitet und gesendet werden, z. B. wenn ein Benutzer in einem Formular auf die Schaltfläche Abbrechen klickt oder wenn er zu einer bestimmten Seite navigiert. So greifen Sie auf diese Funktionen zu:

  1. Fügen Sie das Paket @jutro/events Ihrer package.json-Datei hinzu
  2. Verwenden Sie den folgenden Import im Code:
import {
  publish,
  subscribe,
  unsubscribe,
  UnsubscribeAll,
  JUTRO_TOPICS,
} from '@jutro/events';

Jutro stellt Standardereignistypen für seine Komponenten bereit, die in dem Objekt JUTRO_TOPICS definiert werden:

const JUTRO_TOPICS = {
  COMPONENT_LOADED: 'JUTRO_TOPICS.COMPONENT_LOADED',
  VALUE_CHANGED: 'JUTRO_TOPICS.VALUE_CHANGED',
  FIELD_BLUR: 'JUTRO_TOPICS.FIELD_BLUR',
  ROUTE_CHANGED: 'JUTRO_TOPICS.ROUTE_CHANGED',
  FETCH_REQUEST: 'JUTRO_TOPICS.FETCH_REQUEST',
  FETCH_RESPONSE: 'JUTRO_TOPICS.FETCH_RESPONSE',
  FETCH_ERROR: 'JUTRO_TOPICS.FETCH_ERROR',
  UNKNOWN_ERROR: 'JUTRO_TOPICS.UNKNOWN_ERROR',
  BUTTON_CLICKED: 'JUTRO_TOPICS.BUTTON_CLICKED',
  LINK_CLICKED: 'JUTRO_TOPICS.LINK_CLICKED',
};

Veröffentlichen von Ereignissen​

Mit der publish-Methode können Sie Ereignisse veröffentlichen. Die publish-Methode wird normalerweise in einer onclick()- oder onchange()-Funktion in Ihrem Code verwendet und akzeptiert zwei Parameter:

  • topic: Eine Zeichenfolge, die den Namen des Themas enthält.
  • event: Das Ereignis, das ausgelöst wurde, in Form eines Objekts mit den relevanten Informationen.
publish('ACCOUNT_CREATED', dataObj);

Die folgenden älteren Komponenten veröffentlichen standardmäßig Ereignisse:

  • AppSwitcher
  • AsyncLink
  • Breadcrumb
  • DropdownMenuButton
  • ErrorBoundary
  • ErrorNotice
  • InlineNotification
  • Modal
  • NavBar
  • NotificationAction
  • PopoverContainer
  • Toast
  • TreeView
  • Wizard

Komponenten, die ab Jutro 10.0 erstellt wurden, veröffentlichen standardmäßig keine Ereignisse. Ältere Komponenten, wie die im vorigen Abschnitt aufgeführten, tun dies jedoch. Um alle Standardeinstellungen für die Veröffentlichung von Ereignissen zu deaktivieren, fügen Sie der .env-Datei im Stammverzeichnis Ihrer Jutro-Anwendung JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true hinzu. Wenn dieser Parameter auf true gesetzt ist, oder wenn Sie ein neues Ereignis erstellen, müssen Sie es erst veröffentlichen und dann abonnieren, um es nachzuverfolgen.

Note: Es wird empfohlen, JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true in der Datei .env festzulegen, um ein konsistentes Benutzererlebnis über alle Komponentenereignisse hinweg sicherzustellen.

Abonnieren von Ereignissen​

Mit der subscribe-Methode können Sie Ereignisse nachverfolgen. Sie unterstützt zwei Parameter:

  • topics: Ein Themenname oder eine Liste von Themennamen, die abonniert werden sollen, wobei einer der folgenden Datentypen verwendet wird:
    • string: Ein einzelner Themenname.
    • strings []: Ein Array von Themennamen.
    • object: Schlüssel/Wert-Paare, bei denen der Wert ein Themenname ist.
  • handler: Die Funktion, die ausgeführt werden soll, wenn das Ereignis empfangen wird. Der Handler empfängt das ausgelöste Ereignis sowie den Themennamen in Zeichenfolgenform.

Die Methode subscribe gibt ein handle zurück, das zum Beenden des Abonnements für einen bestimmten Listener verwendet werden kann.

// registers one topic
subscribe(JUTRO_TOPICS.ROUTE_CHANGED, (event) => console.log(event));

// registers a subset of Jutro topics
subscribe(
  [JUTRO_TOPICS.VALUE_CHANGED, JUTRO_TOPICS.FIELD_BLUR],
  (event, topic) => console.log(topic, event)
);

// registers all Jutro topics
subscribe(JUTRO_TOPICS, (event, topic) => console.log(topic, event));

Abbestellen einzelner Ereignisse​

Sie können einzelne Listener mit der Methode unsubscribe abmelden. Sie akzeptiert einen Parameter:

  • handle: Das Handle wird verwendet, um einen bestimmten Listener abzumelden.
// subscribe will return handles
// then you can unsubscribe a single listener
const handle = subscribe(JUTRO_TOPICS.ROUTE_CHANGED, () =>
  console.log('event fired')
);
unsubscribe(handle);

const [valueChangeHandle, blurHandle] = subscribe(
  [JUTRO_TOPICS.VALUE_CHANGED, JUTRO_TOPICS.FIELD_BLUR],
  () => console.log('event fired')
);
unsubscribe(valueChangeHandle);
unsubscribe(blurHandle);

const handles = subscribe(JUTRO_TOPICS, () => console.log('event fired'));
unsubscribe(handles[JUTRO_TOPICS.ROUTE_CHANGED]);

Abbestellen ganzer Themen oder Entfernen aller Listener​

Mit der UnsubscribeAll-Methode können Sie ganze Themen abbestellen oder alle Listener vollständig entfernen. Sie akzeptiert einen Parameter:

  • topic: Ein Themenname, der einen der folgenden Datentypen verwendet:
    • string: Ein einzelner Themenname.
    • strings []: Ein Array von Themennamen.
    • object: Schlüssel/Wert-Paare, bei denen der Wert ein Themenname ist.
// unsubscribe all listeners from one topic
UnsubscribeAll(JUTRO_TOPICS.ROUTE_CHANGED);

// unsubscribe all listeners from a subset of Jutro topics
UnsubscribeAll([JUTRO_TOPICS.VALUE_CHANGED, JUTRO_TOPICS.FIELD_BLUR]);

// unsubscribe all listeners from Jutro topics
UnsubscribeAll(JUTRO_TOPICS);

// unsubscribe all existing topics
UnsubscribeAll();

Erstellen eines benutzerdefinierten Ereignisanbieters​

Sie können eine eigene Instanz von EventProvider erstellen, diese wird jedoch nicht an Jutro-Standardereignisse angefügt. Sie kann sich in Testszenarios als nützlich erweisen.

import { EventProvider } from '@jutro/events';

const provider = new EventProvider();

provider.publish(...)
provider.subscribe(...)
provider.unsubscribe(...)
provider.UnsubscribeAll(...)