Kuten sen luojat sanovat, Stimulus on JavaScript-kehys, jolla on vaatimattomat tavoitteet ja joka ei pyri valtaamaan koko frontendiäsi, vaan täydentämään HTML:ää juuri tarpeeksi käyttäytymisellä, jotta se loistaa.
Tiedän, mitä ajattelet... Toinen. JavaScript puitteet? Niitä on jo niin paljon! Olet oikeassa, mutta tämä kiinnitti huomioni, koska sen on luonut Basecamp. Tunnet luultavasti tämän yrityksen, he ovat luojia Ruby on Rails. He loivat myös Turbolinks, Mainitsen tämän, koska Stimulus sopii sen kanssa erinomaisesti yhteen. Ehkä kannattaa siis kokeilla Stimulusta?
Miten se toimii?
Stimulus toimii tarkkailemalla sivua, odottamalla, että data-controller
attribuutti näkyy. Osoite data-controller
arvo yhdistää ja katkaisee Stimulus-säätimet. Lähtökohta on yksinkertainen: aivan kuten luokka on yhteys HTML:n ja CSS:n välillä, data-controller
on silta HTML:stä JavaScript:hen. Stimulus lisää myös data-action
attribuutti, joka kuvaa, miten sivun tapahtumien tulisi käynnistää ohjaimen metodit, ja attribuutti data-target
attribuutti, jonka avulla voit etsiä elementtejä ohjaimen alueelta.
Helppo asennus
Jos Rails-sovelluksesi käyttää webpacker-helmeä, voit asentaa Stimuluksen yhdellä yksinkertaisella komennolla, sillä webpacker-helmi tarjoaa tehtävän Stimuluksen asentamista varten. Suorita vain seuraava komento Railsin juurihakemistossa:
rails webpacker:install:stimulus
Tämä lisää Stimulusta package.json
ja luo seuraavat kaksi tiedostoa: app/javascript/controllers/index.js:
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("controllers", true, /_controller.js$/)
application.load(definitionsFromContext(context))
Näet, että webpackin require.context-apuohjelmaa kutsutaan. Sen jälkeen se välittää tuloksena saadun kontekstin Application#load-metodille. Tämä tarkoittaa, että sovelluksemme etsii tiedostoja nimeltä[identifier]_controller.js
vuonna app/javascript/controllers/
hakemistoon, jossa tunniste vastaa ohjaimen data-controller-tunnistetta HTML-kielessäsi. Tämä on juuri se paikka, johon meidän pitäisi sijoittaa Stimulus-säätimet.
Sovellus/javascript/controllers/hello_controller.js
syntyy myös. Tämä on vain esimerkkiohjain, jolla voimme leikkiä.
Peruskäyttö
Okei, meillä on siis hello_controller.js
tiedosto, joka on luotu seuraavalla tavalla koodi:
import { Controller } from "stimulus"
export default class extends Controller {
static targets = ["output"]
connect() {
this.outputTarget.textContent = 'Hello, Stimulus!'
}
}
Mutta kuten tiedätte, emme näe mitään vaikutuksia, jos emme tee yhteyttä HTML:n ja JavaScript:n välillä. Lisätään koodia HTML-näkymään. Voit laittaa tämän milloin tahansa:
<div data-controller="hello">
<p data-target="hello.output"> </p>
</div>
Ja tiedättekö mitä? Siinä kaikki! Jos lataat sivusi uudelleen ja näet sivulla "Hei, Stimulus!", se tarkoittaa, että yhteys toimii oikein. Eikö olekin yksinkertaista?
Okei, mutta tämä on vain pelkkä tekstinäyttö. Voimmeko saada jotain toimintaa? Kyllä, voimme! Kuten aiemmin mainitsin, on myös data-action
ominaisuus. Muutetaan sitten HTML-näkymää:
<div data-controller="hello">
<p><input type="number" data-target="hello.days"><br><button data-action="click->hello#calculate">Laske</button></p>
</div>
Ja Stimulus-ohjain app/javascript/controllers/hello_controller.js
:
import { Controller } from "stimulus"
export default class extends Controller {
static targets = ["output", "days"]
connect() {
this.outputTarget.textContent = "Kuinka kauan olet ollut karanteenissa?
}
calculate() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days
if (daysLeft < 1) {
alert('Olet vapaa!')
}
else {
alert(`Määrä päiviä, jotka sinun on oltava karanteenissa: ${daysLeft}`)
}
}
}
Tässä meillä on hyvin yksinkertainen sovellus, joka laskee, kuinka kauan meidän on oltava karanteenissa. Onnistuimme tekemään tämän käyttämällä HTML:n data-action-attribuuttia.
Voit nähdä, että lisäsimme myös "päivät" JavaScript-koodin kohdeluetteloon. Kun teemme näin, Stimulus luo automaattisesti tiedoston this.daysTarget
ominaisuus, joka palauttaa ensimmäisen vastaavan kohde-elementin.
Mitä muuta sinun tarvitsee tietää?
Takaisinkutsut
Olet varmaan huomannut, että on olemassa connect()
menetelmä molemmissa esimerkeissä. Tämä on tarkoitettu sisäänrakennettuja takaisinkutsuja varten. Sinun pitäisi tuntea ne kaikki ja niiden elinkaari, joten tässä ne ovat:
alustaa
: kerran, kun ohjain otetaan käyttöön ensimmäistä kertaa,
Yhdistä
: aina kun ohjain on liitetty DOM:iin,
katkaise yhteys
: aina kun ohjain irrotetaan DOM:sta.
Toiminnan kuvaaja
The data-action
arvo click->hello#calculate
kutsutaan toimintakuvaajaksi. Tämä kuvaus kertoo, että:
klikkaa
on tapahtuman nimi,
Hei
on ohjaimen tunniste,
laske
on menetelmän nimi.
Kohteet
Aivan kuten toiminnoilla, myös Stimuluksella on kohdekuvaaja. . hello.days
kuvaaja sanoo, että: Hei
on ohjaimen tunniste,
päivät
on kohteen nimi.
Edellisessä esimerkissä mainitsin, että Stimulus luo this.daysTarget
ominaisuus, kun kohdeluettelossa on "days". Sinun on myös tiedettävä, että ominaisuuksia voidaan luoda lisää. Esimerkkiin liittyen sinulla voi olla:
this.daysTarget
joka evaluoi ohjaimen vaikutusalueen ensimmäiseen kohteeseen asti. Jos kohdetta ei ole, ominaisuus ilmoittaa virheestä,
this.daysTargets
arvioi kaikkien ohjaimen vaikutusalueella olevien lähdekohteiden joukon,
this.hasDaysTarget
palauttaa true, jos kohde on olemassa, tai false, jos ei ole.
Kuten näet, Stimulus on yksinkertainen ja se voidaan helposti lisätä sovellukseesi. Se on saamassa suosiota RoR-yhteisössä, enkä ole yllättynyt. Itse Ruby-kehittäjänä nautin todella paljon Stimuluksen kanssa työskentelystä. Mitäpä jos kokeilisit sitä?
Lue lisää: