HTML OVER THE WIRE

"The speed of a single-page web application without having to write any JavaScript."

 

Tubo Drive

Tubo Frame

Tubo Stream

Drive

Drive

Drive

Drive

Drive

<a href="/" data-turbo-action="replace"></a>

Evite d'ajouter l'url dans l'historique

<a href="/" data-turbo-method="delete"></a>

Modifie le verbe HTTP

<a href="/" data-turbo="false"></a>

Désactive Turbo sur le lien (et ses enfants)

<a href="/" data-turbo-preload=""></a>

Preload dans le cache la page

Drive

Turbo.visit("/", { action: "replace" })

Evite d'ajouter l'url dans l'historique

Turbo.visit("/", { method: "delete" })

Modifie le verbe HTTP

turbo:before-visit
turbo:before-render
turbo:before-fetch-request

...
https://turbo.hotwired.dev/reference/events

Drive

Drive

Drive

Frame

Frame

Frame

Frame

Frame

_top

Frame

Frame

Stream

Stream

Stream

Turbo Action Action
append insert a la fin de la cible
prepend insert au début de la cible
replace remplace la cible
update remplace le contenu de la cible
remove retire la cible du DOM
before ajoute dans le DOM avant la cible
after ajoute dans le DOM après la cible

Stream

Stream

Stream

Stream

Stream

Stream

"A modest JavaScript framework for the HTML you already have."

 

Controller

Actions

Targets

Values

data-attributes

Controller

Actions

Targets

Targets

Targets

Kind Name Value
Singular this.[name]Target The first matching target in scope
Plural this.[name]Targets An array of all matching targets in scope
Existential this.has[Name]Target A boolean indicating whether there is a matching target in scope

Values

Values

Method Invoked by Stimulus…
initialize() Once, when the controller is first instantiated
[name]TargetConnected(target: Element) Anytime a target is connected to the DOM
connect() Anytime the controller is connected to the DOM
[name]TargetDisconnected(target: Element) Anytime a target is disconnected from the DOM
disconnect() Anytime the controller is disconnected from the DOM

Hotwire

By foret_a

Hotwire

  • 81