Introductie tot StimulusJS in Rails

• Controllers: Dit zijn de belangrijkste bouwstenen van StimulusJS. Elke controller bevat de logica voor een specifiek onderdeel van je applicatie.
• Data-attributen: StimulusJS maakt gebruik van data-attributen in HTML om controllers aan elementen te koppelen. Dit maakt het eenvoudig om gedrag toe te voegen aan specifieke elementen.
• Acties: Acties zijn methoden binnen een controller die worden uitgevoerd als reactie op bepaalde gebeurtenissen, zoals klikken of invoeren.

StimulusJS integreren in een Rails-project

Nu we een beter begrip hebben van wat StimulusJS is en hoe het werkt, laten we eens kijken hoe je het kunt integreren in een Ruby on Rails-project.

Stap 1: StimulusJS installeren

Om StimulusJS aan je Rails-project toe te voegen, kun je de volgende stappen volgen:

bundle add stimulus-rails

Na het installeren van de Stimulus-rails-gem, moet je de Stimulus-bibliotheek initialiseren. Dit kan gedaan worden door de volgende commando's uit te voeren:

rails stimulus:install

Dit commando voegt de benodigde bestanden toe aan je project en configureert StimulusJS automatisch.

Stap 2: Een controller maken

Nu we StimulusJS hebben geïnstalleerd, kunnen we een nieuwe controller maken. Dit kan gedaan worden met het volgende commando:

rails generate stimulus Hello

Dit genereert een nieuwe controller genaamd HelloController in de map app/javascript/controllers. Je kunt de gegenereerde controller openen en de standaardcode bekijken:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("HelloController is connected")
  }
}

Hier zie je dat de connect-methode automatisch wordt aangeroepen wanneer de controller aan een element wordt gekoppeld.

Stap 3: De controller koppelen aan HTML

Nu we een controller hebben gemaakt, moeten we deze koppelen aan een HTML-element. Dit kan gedaan worden met behulp van data-attributen. Hier is een voorbeeld:

<div data-controller="hello">
  <h1>Welkom bij StimulusJS</h1>
  <p>Dit is een voorbeeld van een Stimulus-controller.</p>
</div>

In dit voorbeeld hebben we een div gemaakt met het data-attribuut data-controller="hello". Dit koppelt de HelloController aan dit element.

Stap 4: Acties toevoegen aan de controller

Nu we een controller hebben en deze hebben gekoppeld aan een HTML-element, kunnen we acties toevoegen. Stel dat we een knop willen maken die een bericht weergeeft wanneer deze wordt geklikt. We kunnen de controller als volgt aanpassen:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("HelloController is connected")
  }

  greet() {
    alert("Hallo, wereld!")
  }
}

Nu moeten we de actie aan een HTML-element koppelen. Dit kan gedaan worden door een data-attribuut toe te voegen aan de knop:

<div data-controller="hello">
  <h1>Welkom bij StimulusJS</h1>
  <p>Dit is een voorbeeld van een Stimulus-controller.</p>
  <button data-action="click->hello#greet">Klik hier</button>
</div>

In dit voorbeeld hebben we een knop gemaakt met het data-attribuut data-action="click->hello#greet". Dit betekent dat wanneer de knop wordt geklikt, de greet methode in de HelloController wordt aangeroepen.

Geavanceerde functionaliteit met StimulusJS

StimulusJS biedt meer geavanceerde functionaliteit die je kunt gebruiken om je applicatie verder te verbeteren. Hier zijn enkele voorbeelden van wat je kunt doen:

Gebruik maken van parameters

StimulusJS stelt je in staat om parameters door te geven aan je controller. Dit kan handig zijn als je verschillende instellingen wilt configureren. Hier is een voorbeeld:

<div data-controller="hello" data-hello-message="Hallo, wereld!">
  <button data-action="click->hello#greet">Klik hier</button>
</div>

In de controller kun je de parameter als volgt gebruiken:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("HelloController is connected")
  }

  greet() {
    const message = this.data.get("message")
    alert(message)
  }
}

Interactieve elementen beheren

StimulusJS maakt het eenvoudig om interactieve elementen te beheren, zoals formulieren en modals. Hier is een eenvoudig voorbeeld van hoe je een formulier kunt beheren:

<div data-controller="form">
  <form data-action="submit->form#submit">
    <input type="text" name="name" />
    <input type="submit" value="Verstuur" />
  </form>
</div>

In de controller kun je de submit-methode als volgt definiëren:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  submit(event) {
    event.preventDefault()
    const name = this.element.querySelector('input[name="name"]').value
    alert(`Bedankt voor je inzending, ${name}`)
  }
}

Conclusie

StimulusJS is een krachtig hulpmiddel dat ontwikkelaars in staat stelt om dynamische functionaliteit aan hun Rails-applicaties toe te voegen zonder de complexiteit van volledige JavaScript-frameworks. Door gebruik te maken van controllers en data-attributen, kun je eenvoudig interactieve elementen beheren en de gebruikerservaring verbeteren.

Of je nu een eenvoudige applicatie bouwt of een complex systeem, StimulusJS biedt de flexibiliteit en eenvoud die je nodig hebt. We hopen dat deze introductie je heeft geholpen om de basisprincipes van StimulusJS te begrijpen en dat je het in je eigen projecten zult implementeren.