Erweitern Sie Ihre Rails 7-App mit Stimulus.js und JavaScript-Integration

Stimulus.js ist ein einfaches JavaScript-Framework, das Ihr HTML erweitert. Es ist der perfekte Begleiter für die integrierte Funktionalität von Rails. In diesem Beitrag erfahren Sie, wie Sie Stimulus.js für die JavaScript-Funktionalität verwenden, es in andere JavaScript-Bibliotheken integrieren und JavaScript-Abhängigkeiten mithilfe von Importmap effektiv verwalten.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie Folgendes haben:

• Einrichten der Rails 7-Anwendung
• Grundkenntnisse in JavaScript und Rails

Einrichten von Stimulus.js in Rails 7

Rails 7 bietet standardmäßig Unterstützung für Stimulus.js. Stellen Sie zunächst sicher, dass Stimulus in Ihrer Bewerbung enthalten ist, indem Sie Folgendes ausführen:

rails new my_app
cd my_app

Sie finden die Stimulus-Controller unter app/javascript/controllers.

Erstellen eines Stimulus-Controllers

Lassen Sie uns einen Stimulus-Controller erstellen, um ein einfaches Klickereignis zu verarbeiten. Führen Sie den folgenden Befehl aus:

rails generate stimulus hello

Dadurch wird ein neuer Controller hello_controller.js in app/javascript/controllers generiert. Öffnen Sie die Datei und fügen Sie den folgenden Code hinzu:

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

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

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    this.outputTarget.textContent = 'Hello, World!'
  }
}

Verwenden Sie in Ihrem HTML den Stimulus-Controller:

  

  Greet

Wenn auf die Schaltfläche geklickt wird, ändert sich der Text in „Hello, World!“.

Integration mit anderen JavaScript-Bibliotheken

Stimulus.js kann nahtlos mit anderen JavaScript-Bibliotheken zusammenarbeiten. Lassen Sie uns beispielsweise jQuery in Stimulus.js integrieren.

Fügen Sie zunächst jQuery mit Importmap hinzu:

JQuery zu Ihrer config/importmap.rb hinzufügen:

pin "jquery", to: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"

Dann importieren Sie jQuery in Ihren Stimulus-Controller:

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from "jquery"

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

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    $(this.outputTarget).fadeOut().fadeIn().text('Hello, jQuery!')
  }
}

Verwalten von JavaScript-Abhängigkeiten

Die Verwaltung von JavaScript-Abhängigkeiten in Rails 7 ist mit Importmap unkompliziert. Hier sind einige Tipps:

• Eine Bibliothek hinzufügen: Verwenden Sie den Pin „library_name“ für: „library_url“ in Ihrer config/importmap.rb, um eine neue Bibliothek hinzuzufügen.
• Eine Bibliothek entfernen: Entfernen Sie die entsprechende Zeile aus config/importmap.rb, um eine vorhandene Bibliothek zu entfernen.
• Bibliotheken aktualisieren: Aktualisieren Sie die URLs in config/importmap.rb auf die neuesten Versionen.
• Überprüfen Sie veraltete Bibliotheken: Besuchen Sie die URLs in config/importmap.rb, um zu sehen, ob neuere Versionen verfügbar sind.

Sie können Ihrem Projekt auch benutzerdefinierte JavaScript-Dateien hinzufügen. Platzieren Sie sie im Ordner app/javascript und importieren Sie sie bei Bedarf.

Abschluss

Stimulus.js bietet eine leistungsstarke und dennoch einfache Möglichkeit, Ihrer Rails-Anwendung JavaScript-Funktionalität hinzuzufügen. Durch die Integration mit anderen JavaScript-Bibliotheken können Sie ein reichhaltiges und dynamisches Benutzererlebnis schaffen. Durch die ordnungsgemäße Verwaltung Ihrer JavaScript-Abhängigkeiten wird sichergestellt, dass Ihre Anwendung wartbar und aktuell bleibt.

Viel Spaß beim Codieren!