Stimulus.js: valkostur JavaScript-ramma fyrir Rails-forrit

Ég veit hvað þú ert að hugsa… Annað JavaScript rammi? Það eru nú þegar svo margir þeirra! Þú hefur rétt fyrir þér, en þessi vakti athygli mína þar sem hann var búinn til af Basecamp. Þú þekkir líklega þetta fyrirtæki, það eru skapendur Ruby on Rails. Þeir bjuggu einnig til Turbolinks, og ég nefni þetta vegna þess að Stimulus passar fallega með því. Svo kannski er það þess virði að prófa Stimulus?

Hvernig virkar það?

Stimulus virkar með því að fylgjast með síðunni og bíða eftir gagnastýril Eiginleiki til að birtast. The gagnastýril gildi tengir og aftengir Stimulus-stýringar. Forsendan er einföld: eins og class er tenging milli HTML og CSS, gagnastýril er brú frá HTML til JavaScript. Stimulus bætir einnig við gagnavirkni eiginleiki sem lýsir hvernig atburðir á síðunni ættu að kalla fram aðferðir stjórnandans, og gagnamiðu Eiginleiki sem gefur þér meðhöndlun til að finna þætti í sviði stjórnandans.

Auðveld uppsetning

Ef þitt Relsar appið notar webpacker-gém, þú getur sett upp Stimulus með einu einföldu skipun þar sem webpacker-gémið býður upp á verkefni til að setja upp Stimulus. Keyrið eftirfarandi skipun í rótarmöppu Rails-verkefnisins:

rails webpacker:install:stimulus
Þetta bætir örvun við package.json og býr til eftirfarandi tvær skrár: 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))

Þú getur séð að hjálparfari require.context í Webpack er kallaður. Hann sendir síðan útkomna samhengi til Application#load-aðferðarinnar. Þetta þýðir að forritið okkar er að leita að skrám sem heita[identifier]_stjórnandi.js í app/javascript/stýritæki/ möppu, þar sem auðkennið samsvarar gagnastýritækjaauðkenni stjórnandans í HTML-inu þínu. Þetta er nákvæmlega staðurinn til að setja Stimulus-stjórnendur.
Forritið/javascript/stýritæki/hæ_til_stýritæki.js er einnig búið til. Þetta er bara dæmiskóði sem við getum leikið okkur með.

Grunnnotkun

Ok, svo við höfum hæ_stýritafl.js Skrá búin til með eftirfarandi kóði:

import { Controller } from "stimulus"

export default class extends Controller {
static targets = ["output"]
connect() {
this.outputTarget.textContent = 'Halló, Stimulus!'
}
}

En eins og þú veist munum við ekki sjá neinar áhrif ef við tengjum ekki HTML og JavaScript. Bætum við kóða við HTML-yfirblik þitt. Þú getur sett þetta hvar sem er:

<div data-controller="hello">
<p data-target="hello.output">&nbsp;</p>
</div>

Og veistu hvað? Það er allt! Ef þú hleður síðuna þína aftur og sérð “Halló, Stimulus!” á síðunni þinni, þá þýðir það að tengingin virkar eðlilega. Einfaldlega, ekki satt?
Ok, en þetta er bara venjulegur textaskjá. Getum við fengið smá aðgerð? Já, það getum við! Eins og ég nefndi áður, er líka gagnavirkni eiginleiki. Breytum þá HTML-sýn okkar:

<div data-controller="hello">
<p><input type="number" data-target="hello.days"><br><button data-action="click->hello#calculate">Reikna</button></p>
</div>

Og Stimulus-stýringin app/javascript/stýritölvur/hæ_til_stýritölva.js:

import { Controller } from "stimulus"

export default class extends Controller {
static targets = ["output", "days"]
connect() {
this.outputTarget.textContent = 'Hversu lengi hefurðu verið í sóttkví?'
}
calculate() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert('Þú ert laus!'
}
else {
  alert(`Fjöldi daga sem þú þarft að vera í sóttkví: ${daysLeft}`)
}

}
}

Hér er mjög einfalt forrit sem reiknar út hversu lengi við verðum að vera í sóttkví. Við náðum að gera þetta með því að nota data-action-eiginleikann í HTML.
Þú getur séð að við bættum einnig “dögum” við markmiðalista í JavaScript-kóðanum. Þegar við gerum þetta býr Stimulus sjálfkrafa til þetta.dagsmarkmið Eiginleiki sem skilar fyrsta samsvarandi markhnútnum.

Hvað þarf þú annars að vita?

Tilkynningarköll

Þú hefur líklega tekið eftir að það er tengja() aðferð í báðum dæmunum. Þessi er fyrir innbyggðar tilkynningaraðgerðir. Þú ættir að þekkja þær allar og lífsferil þeirra, svo hér eru þær:
upphafarstilla: einu sinni, þegar stýritækið er fyrst stofnað,
tengja: hvenær sem stýritækið er tengt við DOM-ið,
aftengjast: hvenær sem stýringin er aftengd frá DOM.

Aðgerðarlýsing

Þeir gagnavirkni gildi smelltu->hæ#reikna er kallað aðgerðarlýsing. Þessi lýsing segir að:

• smelltu er nafn viðburðarins,
• hæ er auðkenni stýritækisins,
• reikna er nafnið á aðferðinni.

Markmið

Rétt eins og fyrir aðgerðir hefur Stimulus markmiðslýsing. hæ.dagar Lýsingarefnið segir að: hæ er auðkenni stýritækisins,
dagar er marknafnið.

Í fyrri dæminu nefndi ég að Stimulus býr til þetta.dagsmarkmið Eiginleiki þegar “dagar” eru í markalistanum. Þú þarft einnig að vita að hægt er að búa til fleiri eiginleika. Í tengslum við dæmið geturðu haft:

þetta.dagsmarkmið sem metur upp að fyrsta markmiðinu innan gildissviðs stjórnandans. Ef ekkert markmið er, skráir eignin villu,
Þetta.dagsmarkmiðin metur upp í fylki af öllum upprunalegum markmiðum í gildissviði stýritækisins,
Þetta hefur daga markmið Skilar satt ef markmið er til, annars falskt.

Eins og þú sérð er Stimulus einfalt og auðvelt að bæta því við forritið þitt. Það er að öðlast nokkurn vinsældir í Réttur til afturkomu samfélag og ég er ekki hissa. Sem Rúbín þróunaraðili Ég persónulega nýt þess virkilega að vinna með Stimulus. Hvernig væri að prófa það?

Lesa meira:

• Vefforritþróun: Af hverju er Ruby on Rails tækni sem vert er að velja?
• Tími er kominn fyrir nýja veruleika. Tímabil fjarvinnu hófst fyrir mánuði síðan.
• 5 ástæður fyrir því að þú munt finna hæfa Ruby-þróunaraðila í Póllandi