Erweiterter Stimulus: Benutzerdefinierte Aktionsoptionen

Dieser Artikel wurde ursprünglich auf Rails Designer veröffentlicht

---

Mit Stimulus können Sie Ihre eigenen benutzerdefinierten Aktionsoptionen registrieren. Dies sind die Dinge, die Sie an eine Aktion anhängen können, wie zum Beispiel „keypress->input#validate:prevent“ (wie im Artikel über Stimulusfunktionen, die Sie (nicht) kannten, gezeigt). :prevent ist eine Aktionsoption und verhindert das Standardereignis. Weitere verfügbare Optionen sind: :stop und :self.

Sie können auch Ihre eigenen erstellen! Dadurch können Sie noch mehr aus Stimulus herausholen (wer hätte gedacht, dass ein bescheidener Rahmen über viele Funktionen verfügt?!).

Ich möchte ein paar Vorschläge auflisten, um Ihnen zu helfen, eine Vorstellung davon zu bekommen, was sie tun können, und um Sie zu inspirieren, Ihre eigenen zu machen.

Die Grundlagen

Mit der Methode Application.registerActionOption können Sie Ihre eigenen Aktionsoptionen erstellen. Die Methode würde dann entweder wahr oder falsch zurückgeben, basierend auf der von Ihnen hinzugefügten Logik.

Die Grundlagen sehen so aus:

// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"

const application = Application.start()

application.registerActionOption("fire", ({ event, value }) => {
  // any logic that returns true/false
}

Wenn es true zurückgibt, wird die Aktion ausgeführt, an die es angehängt ist. So verwendet: click->controller#action:fire.

Jetzt sind die Grundlagen klar, schauen wir uns einige Beispiele an, wie Sie es verwenden könnten.

WennDraußen

Eine häufige Aktion besteht darin, außerhalb eines Elements zu klicken, um es auszublenden, beispielsweise bei Modal- oder Dropdown-Menüs. Logik wäre etwa so:

application.registerActionOption("whenOutside", ({ event, element }) => {
  return !element.contains(event.target);
});

Und Ihr Stimulus-Controller könnte so aussehen:

// app/javascript/controllers/dropdown_controller.js
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["menu"];

  show() {
    this.menuTarget.removeAttribute("hidden");
  }

  hide() {
    this.menuTarget.setAttribute("hidden", true);
  }
}

Dann in Ihrem HTML:

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop">Show</button>

  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>

Nur ​​wenn Sie außerhalb der ul mit data-dropdown-target="menu" klicken, wird das Ziel ausgeblendet. Ist Ihnen die Option „Aktion stoppen“ aufgefallen? Ich habe es im Artikel über Reizfunktionen, die Sie (nicht) kannten, untersucht.

Gedrosselt

Angenommen, Ihr dropdown_controller.js verfügt über eine toggle-Methode und Sie möchten, dass Ihre Benutzer diese aus irgendeinem Grund nur alle 1000 ms umschalten (kein Urteil!).

const throttles = new WeakMap();

application.registerActionOption("throttled", ({ element }, { wait = 1000 } = {}) => {
  if (!throttless.has(element)) {
    throttles.set(element, 0);
  }

  const now = Date.now();
  const lastRun = throttles.get(element);

  if (now - lastRun >= wait) {
    throttles.set(element, now);

    return true;
  }

  return false;
});

Dies wird nur einmal alle 1000 ms wahr zurückgeben.

? Schwache Karte? WTF?! Ich arbeite an einem Buch, damit es weniger gruselig ist! JavaScript für Rails-Entwickler vorbestellen.

Erweitern wir die dropdown_controller.js mit einer toggle-Methode:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["menu"];

  show() {
    this.menuTarget.removeAttribute("hidden");
  }

  toggle() {
    this.menuTarget.toggleAttribute("hidden");
  }

  hide() {
    this.menuTarget.setAttribute("hidden", true);
  }
}

Verwenden Sie es so:

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop:throttled">Show</button>

  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>

Sehen Sie, wie es möglich ist, Aktionsoptionen zu stapeln? Es werden sowohl Stopp als auch Drosselung verwendet.

Mit Metakey

Ein anderes Beispiel könnte sein, dass Sie das Dropdown-Menü nur öffnen möchten, wenn die Meta-Taste () oder die Strg-Taste gedrückt wird

application.registerActionOption("withMetaKey", ({ event }) => {
  return event.metaKey;
});

Verwenden Sie es in Ihrem HTML wie folgt:

<div data-controller="dropdown">
  <button data-action="dropdown#show:stop:throttled:withMetaKey">Show</button>

  <ul hidden data-clicker-target="menu" data-action="click@window->dropdown#hide:whenOutside">
    <li>Menu Item</li>
  </ul>
</div>

Das Dropdown-Menü wird nur angezeigt, wenn beim Klicken auch cmd/ctrl gedrückt wird.

Noch eins? Noch einer!

MitBestätigen

Möchten Sie einen Bestätigungsdialog anzeigen, bevor Sie das Dropdown-Menü anzeigen?

// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"

const application = Application.start()

application.registerActionOption("fire", ({ event, value }) => {
  // any logic that returns true/false
}

Und in Ihrem HTML:

application.registerActionOption("whenOutside", ({ event, element }) => {
  return !element.contains(event.target);
});

Und alle diese gestapelten benutzerdefinierten Aktionen werden funktionieren! Für das gegebene Beispiel kein praktischer Nutzen, aber es zeigt, was man damit machen kann.

Wie Sie bemerkt haben, möchte ich die benutzerdefinierten Aktionsoptionen so benennen, dass sie beim Lesen in der Aktion leicht verständlich sind:

• click@window->dropdown#hide:whenOutside;
• click->dropdown#show:withMetakey.

Persönliche Präferenz. Du kannst sie natürlich beliebig benennen.

Für viele dieser Beispiele müssten Sie normalerweise separate Aktionen erstellen, jedoch nicht mit benutzerdefinierten Aktionsoptionen. Sobald Sie sie im Einsatz gesehen haben, werden Sie zahlreiche Anwendungsfälle dafür finden.

? Ich habe diese benutzerdefinierten Aktionsoptionen in einem kleinen, übersichtlichen Paket namens stimulus-fx gesammelt; Schauen Sie sich das unbedingt an! Tragen Sie bei, wenn Sie es nützlich finden!

Das obige ist der detaillierte Inhalt vonErweiterter Stimulus: Benutzerdefinierte Aktionsoptionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!