Hotwire (HTML-over-the-wire) wordt standaard geleverd in Rails 7. Stimulus is één onderdeel van Hotwire, de andere isTurbo.
De belangrijkste belofte van de Hotwire-aanpak is het verkrijgen van de voordelen van JavaScript-applicaties met één pagina, zoals snellere, vloeiendere gebruikersinterfaces zonder veel Javascript te schrijven (zeker niet de hoeveelheid die nodig is met volwaardige JavaScript-frameworks aan de clientzijde).
Maar Javascript op de pagina is nog steeds nodig voor het gedrag van moderne webapps, zoals elementen weergeven/verbergen, items toevoegen aan een takenlijst, enz. Dit is waar StimulusJS in beeld komt.
Simulus wordt geadverteerd als een minimaal Javascript-framework. Het bestaat sinds 2017-2018. De nieuwste versie, stimulus 3.0, is uitgebracht in oktober 2021.
Het is klein en eenvoudig genoeg om, als u de voorbeelden in dit bericht uitprobeert, in de komende 15 minuten goed te begrijpen hoe u Stimulus kunt gebruiken.
Leuk weetje: Stimulus gebruikt de browserMutationObserver-APIom DOM-veranderingen te detecteren.
Invoering
Laten we eerst wat code bekijken. Beschouw de volgende HTML-code:
gegevensbeheerder="klembord">PIN: data-klembord-target="bron" typ="tekst" waarde="1234" alleen lezen> data-actie="klembord#kopie">Kopieer naar klembord
Enkele feiten om op te merken over Stimilus uit de bovenstaande code:
- U kunt een idee krijgen van wat er aan de hand is door alleen naar de HTML te kijken, zonder naar de
klembordcontrollercode. (Dit verschilt van andere HTML waarbij een extern JS-bestand gebeurtenishandlers erop toepast.) - Stimulus heeft er zelf geen last vancreërende HTML-code. Dat wordt nog steeds op de server weergegeven bij het laden van de pagina (eerste hit of via Turbo) of via een Ajax-verzoek dat de DOM verandert.
- Stimulus houdt zich bezig met het manipuleren van het bestaande HTML-document. Door een CSS-klasse toe te voegen die een element verbergt, animeert en markeert.
- Stimuluskannieuwe DOM-elementen maken en dat mag. Maar dat is een minderheidszaak. De nadruk ligt op het manipuleren, niet op het creëren van elementen.
Hoe Stimulus verschilt van reguliere JavaScript-frameworks:
- Andere raamwerken zijn gericht op het omzetten van JSON in DOM-elementen via sjabloontaal
- Andere raamwerken blijven gehandhaafdstaatbinnen JavaSripts-objecten. Voor Stimulas wordt de status opgeslagen in de HTML, zodat controllers kunnen worden weggegooid tussen paginawijzigingen, maar nog steeds opnieuw kunnen worden geïnitialiseerd zoals ze waren toen de in de cache opgeslagen HTML opnieuw verschijnt.
Hoe Stimulus werkt
Stimulus is ontworpen om te verbeterenstatischofserver-gerenderdHTML door JavaScript-objecten te verbinden met elementen op de pagina met behulp van eenvoudige annotaties.
Deze JavaScript-objecten worden aangeroepencontroleursen Stimulus controleert de pagina die wacht op HTMLgegevensbeheerderattributen verschijnen. De waarde van elk attribuut is de naam van een controllerklasse. Stimulus vindt die klasse, creëert een nieuwe instantie van die klasse en verbindt deze met het element.
Net alsklasattribuut is een brug die HTML met CSS verbindt.gegevensbeheerderattribuut is een brug die HTML met JavaScript verbindt.
Naast controllers zijn er nog 3 andere belangrijke Stimulus-concepten:
acties- die controllermethoden verbinden met DOM-gebeurtenissen met behulp vandata-actieattributen
doelen- die belangrijke elementen binnen een controller lokaliseren
waarden- die data-attributen op het controllerelement lezen/schrijven/observeren
In de onderstaande code zullen we meer voorbeelden zien van hoe controllers, acties, doelen en waarden worden gebruikt.
Deze voorbeelden komen uit het officiële Stimulus Handboek, u kunt de repository vindenhier.
Hallo wereld in stimulans
In dit voorbeeld wordt een begroeting afgedrukt wanneer de gebruiker op een knop klikt, samen met de naam die in een tekstvak is getypt. Laat zien hoeactiesEndoelenworden in de code gebruikt.
data-hallo-target="naam" typ="tekst"> data-actie="klik->hallo#begroet">Begroeten