Vererbung mit Stimulus Controller

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

---

Für mich ist das Schönste an der Verwendung von Stimulus-Controllern, dass es sich um kleine, spezifische Dinge handelt. Sie erstellen keinen großen Controller für eine Komponente, sondern mehrere kleinere Stimulus-Controller, die alle ihre eigene kleine Aufgabe erfüllen. Und wenn Sie noch mehr Zusammenhalt brauchen, können Sie die Kontakte nutzen, um sie „miteinander reden“ zu lassen.

Aber wenn Sie einen anderen Stimulus-Controller benötigen, dessen Logik sich mit einem anderen überschneidet, können Sie zwei Dinge tun:

• Extrahieren Sie die Logik in separate Funktionen, die Sie importieren. oder,
• Verwenden Sie Vererbung, um die Logik vom anderen Controller zu erhalten.

Vererbung ist das, was ich heute erforschen möchte. Kürzlich habe ich der UI-Komponentenbibliothek eine Massenaktionskomponente hinzugefügt. Dadurch können Benutzer mehrere Elemente aus einer Liste auswählen und auf alle dieselbe Aktion anwenden, z. Alle löschen. Dies hat einige Überschneidungen mit der Checkbox-Komponente. Beide benötigten die exakt gleiche Logik, um Elemente auszuwählen. Bei den Massenaktionen war die Auswahl der Elemente der Anfang; es würde dann die „Aktionsleiste“ mit einem Zähler anzeigen.

(siehe Originalartikel für das bewegende GIF! ?)

Hinweis: In diesem Artikel geht es nicht darum, Massenaktionen von Anfang bis Ende hinzuzufügen! Dafür empfehle ich Ihnen, sich Rails Designer anzusehen (es enthält auch Hunderte von Komponenten, die Sie in Ihrer Rails-SaaS-App verwenden können).

Sehen wir uns zunächst die Datei checkboxes_controller.js an (die im Rails Designer enthaltene Datei ist etwas komplizierter!).

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

export default class extends Controller {
  static values = { checkboxesCheckedCount: Number };

  selectAll() {
    this.setCheckboxesTo(true);
  }

  deselectAll() {
    this.setCheckboxesTo(false);
  }

  setCheckboxesTo(boolean) {
    const checkboxes = this.checkboxes
      .filter(checkbox => !checkbox.disabled)
      .forEach(checkbox => checkbox.checked = boolean);

    this.checkboxesCheckedCountValue = checkboxes.length;
  }

  // …
}

Ich denke, das ist einfach genug, um es zu befolgen, oder? Dann die bulk_actions_controller.js:

// app/javascript/controllers/bulk_actions_controller.js
import CheckboxesController from "controllers/checkboxes_controller";

export default class BulkActionsController extends CheckboxesController {
  static values = { open: Boolean };

  // private

  checkboxesCheckedCountValueChanged() {
    this.openValue = this.checkboxesCheckedCountValue;
  }
}

Schneller Ablauf des Codes: Wenn sich checkboxesCheckedCountValue ändert (was ein Wert von checkboxes_controller ist) wird der openValue festgelegt (0 ist falsch, alles andere ist wahr). Ganz einfach! Der openValue wird dann verwendet, um die Aktionsleiste anzuzeigen/auszublenden.

Sie können sehen, dass es nicht vom Controller erbt, sondern von CheckboxesController, der in der 2. Zeile importiert wird (anstelle des typischen Imports { Controller } von „@hotwired/stimulus“;).

Aber so wie es derzeit geschrieben steht, wird das nicht ausreichen. Der checkboxes_controller wird tatsächlich nicht korrekt exportiert. Machen wir das zuerst:

import { Controller } from "@hotwired/stimulus";

// Was: `export default class extends Controller {`
export default class CheckboxesController extends Controller {
  // …
}

Wie funktioniert das? Für Ruby (und Rails) können Sie wie folgt von einer anderen Klasse erben:

class User < ApplicationRecord
class Integration::Netlify < Integration::Base
# etc.

Rails, oder genauer gesagt Zeitwerk, lädt die Klassen automatisch für Sie, daher würde oben einfach funktionieren. Bei einer typischen Ruby-App werden Klassen auch nicht automatisch geladen und Sie müssen dies manuell tun.

require "application_record"
require "integration/base"
# etc.

Das ähnelt der Funktionsweise von JavaScript.

Die Art und Weise, wie Sie Stimulus-Controller schreiben (Export-Standardklasse erweitert Controller), besteht darin, eine anonyme Klasse zu erstellen, die den Stimulus-Controller erweitert (ähnlich der Klasse < Integration::Base). Der checkboxes_controller ist jetzt eine benannte Klasse, die den Stimulus Controller erweitert.

Jetzt kann das ohne Probleme in bulk_actions_controller importiert werden. Und so kann es die Funktionen und die gesamte andere Logik (this.checkboxesCheckedCountValue) vom checkboxes_controller erben. Beachten Sie, dass private Funktionen (die mit einem # beginnen) nicht in anderen JavaScript-Klassen verwendet werden können, was sich von Ruby-Klassen unterscheidet!

Wann sollte die Vererbung für Stimulus-Controller verwendet werden?

Ich greife nicht so oft nach einer Erbschaft. Häufiger extrahiere ich die Logik in eine eigene Funktion in einer anderen Datei und importiere diese stattdessen (wie Rubys Include oder Extend). Aber manchmal, wenn es eine 100-prozentige Überschneidung mit der Logik des anderen Controllers gibt und ich keine Änderungen am anderen Controller vornehmen muss, ist die Vererbung eine schöne und saubere Option.

Um es zusammenzufassen:

• Machen Sie die andere Klasse importierbar und exportieren Sie die Standardklasse CheckboxesController erweitert Controller;
• Importieren Sie dann die Klasse in den anderen Controller und importieren Sie CheckboxesController aus „controllers/checkboxes_controller“;;
• Erweitern Sie dann den anderen Controller mithilfe der importierten Controller-Export-Standardklasse BulkActionsController erweitert CheckboxesController {}.

Sie können sehen, dass die Syntax der von Ruby ziemlich ähnlich ist, aber ausführlicher (aber das ist wirklich einzigartig bei Ruby!).

? Ich plane die Veröffentlichung eines Buches: JavaScript für Rails-Entwickler. Weit über 50 Leute haben es bereits vorbestellt. Bist du der Nächste? ❤️

Das obige ist der detaillierte Inhalt vonVererbung mit Stimulus Controller. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!