Stimulus Cheat Sheet
Show more
Hide more
Print
Controllers
Basics
controllerimport { Controller } from "@hotwired/stimulus"
export default class extends Controller { … } Documentation
export default class extends Controller { … } Documentation
Controllers
Properties
applicationthis.application Documentation
HTML elementthis.element Documentation
Identifiers
filecontrollers/reference_controller.js Documentation
data-controller<div data-controller="reference"></div> Documentation
Scope
<p data-controller="r">Only <p> itself and children Documentation
Nested scope
<p data-controller="a">
<b data-controller="b">Excluding scope of nested controllers
// Controller 'a' not aware of targets in 'b' Documentation
<b data-controller="b">Excluding scope of nested controllers
// Controller 'a' not aware of targets in 'b' Documentation
Multiple Controllers
Space-separated list<div data-controller="clipboard list-item"> Documentation
Multiple elements,
same controller<li data-controller="list-item">1</li>
<li data-controller="list-item">2</li> Documentation
same controller<li data-controller="list-item">1</li>
<li data-controller="list-item">2</li> Documentation
Naming Conventions
camelCasecamelCase for method and property names Documentation
Registration
Manuallyimport RefController from "[…]/ref_controller"
application.register("ref", RefController) Documentation
application.register("ref", RefController) Documentation
Lifecycle Callbacks
Methods
initialize()Once, when controller is instantiated Documentation
[…]TargetConnected(…)Anytime, target connected to DOM Documentation
connect()Anytime, controller connected to DOM Documentation
[…]TargetDisconnected(…)Anytime, target disconnected from DOM Documentation
disconnect()Anytime, controller disconnected from DOM Documentation
Actions
Methods
data-actiondata-action="click->gallery#next" Documentation
controllernext(event) { … }" Documentation
Event Shorthand
aclick Documentation
buttonclick Documentation
detailstoggle Documentation
formsubmit Documentation
inputinput Documentation
input type=submitclick Documentation
selectchange Documentation
textareainput Documentation
Global Events
data-actionresize@window->gallery#layout" // Append @window or @document in action descriptor Documentation
Action Options
data-action="click->gallery#open:capture Documentation
:capture{ capture: true } Documentation
:once{ once: true } Documentation
:passive{ passive: true } Documentation
:!passive{ passive: false } Documentation
Custom Action Options
:stopCalls .stopPropagation() before invoking Documentation
:preventcalls .preventDefault() before invoking Documentation
:selfOnly invokes when fired by itself Documentation
registerActionOptionapplication.registerActionOption('action', …) Documentation
Event Objects: Event Property
event.typeName of event (e.g. "click")
event.targetTarget that dispatched event // innermost Documentation
event.currentTargetTarget on which event listener is installed Documentation
event.paramsAction params by submitter element Documentation
Event Objects: Event Method
event.preventDefault()Cancels event’s default behavior Documentation
event.stopPropagation()Stops the event before it bubbles Documentation
Multiple Actions
data-actionfocus->field#highlight input->search#update Documentation
Naming Conventions
data-actionclick->profile#click" // Don't Documentation
data-actionclick->profile#showDialog" // Do (What happens) Documentation
Action Parameters, declare
data-item-id-param="123"123 // Number Documentation
data-item-url-param="/yo""/yo" // String Documentation
…-ob-param='{"v":6}'{v:6} // Object Documentation
…-item-bo-param="true"true // Boolean Documentation
Action Parameters, use in JS
up(event)event.params Documentation
up({params})params // Destruct Documentation
up({params:{id,url}})id, url // Destruct only needed params Documentation
Definitions
static targetsstatic targets = [ "query", "results" ] Documentation
Properties
Singularthis.[name]Target // First match Documentation
Pluralthis.[name]Targets // Array matching targets Documentation
Existentialthis.has[name]Target // Boolean if match Documentation
Shared Targets
Multiple controllersdata-c1-target="one" data-c2-target="two" Documentation
Optional Targets
Existential targetif (this.hasResultsTarget) { … } Documentation
Connected and Disconnected Callbacks
[name]TargetConnecteditemTargetConnected(element) { … } Documentation
[name]TargetDisconnecteditemTargetDisconnected(element) { … } Documentation
Naming Conventions
camelCaseUse camelCase to specify target names Documentation
Definitions
static outletsstatic outlets = [ "result" ] Documentation
Properties
Existentialhas[name]Outlet // Boolean Documentation
Singular[name]Outlet // Controller Documentation
Plural[name]Outlets // Array Documentation
Singular[name]OutletElement // Element Documentation
Plural[name]OutletsElements // Array Documentation
Accessing Controllers and Elements
this.resultOutlet.idValue Documentation
this.resultOutlet.imageTarget Documentation
this.resultOutlet.activeClasses Documentation
Outlet Callbacks
[name]OutletConnected() Documentation
[name]OutletDisconnected() Documentation
Optional outletsthis.has[Name]Outlet Documentation
Values
Attributes and Names
valuedata-loader-url-value="/messages" Documentation
static valuesstatic values = { url: String } Documentation
this.urlValuefetch(this.urlValue).then( … ) Documentation
Definitions
static valuesstatic values = { u: String, o: Object } Documentation
Types
(Type)(Encoded as…) // (Decoded as…) Documentation
ArrayJSON.stringify(array) // JSON.parse(value) Documentation
Booleanboolean.toString() // !(v=='0' || v=='false') Documentation
Numbernumber.toString() // number(v) Documentation
ObjectJSON.stringify(object) // JSON.parse(value) Documentation
Stringitself // itself Documentation
Properties and Attributes
(Kind)(Property name) // (Effect) Documentation
Getterthis.[name]Value // Reads data-[…]-[name]-value Documentation
Setterthis.[name]Value= // Writes data-[…]-[name]-value Documentation
Existentialthis.has[name]Value= // ? data-[…]-[name]-value Documentation
Getters
(Type)(Default value) Documentation
Array[] Documentation
Booleanfalse Documentation
Number0 Documentation
Object{} Documentation
String" " Documentation
Change Callbacks
[name]ValueChangedurlValueChanged() { … } Documentation
Previous ValuesurlValueChanged(value, previousValue) { … } Documentation
Default values
Stringurl: { type: String, default: '/bill' } Documentation
Numberinterval: { type: Number, default: 5 } Documentation
Naming Conventions
camelCase/kebab-caseJavaScript: camelCase, HTML: kebab-case Documentation
Attributes
formatdata-[identifier]-[logical-name]-class" Documentation
CSS class attributesdata-search-loading-class="busy" Documentation
Multiple classesdata-search-loading-class="busy bg dim" Documentation
Properties
(Kind)(Name) // (Value) Documentation
Singularthis.[logicalName]Class // Value Documentation
Plurarthis.[logicalName]Classes // Array Documentation
Existentialthis.has[logicalName]Class // Boolean Documentation
Example 1 classthis.el.classList.add(this.loadingClass) Documentation
Example x classesthis.el.classList.add(...this.loadingClasses) Documentation
Naming Conventions
camelCase/kebab-caseJS/CSS class: camelCase, HTML: kebab-case Documentation