StimulusReflex Spickzettel

Kernkonzepte

StimulusReflex ermöglicht reaktive Echtzeit-Benutzeroberflächen in Rails-Anwendungen mittels WebSockets (ActionCable) und CableReady.

Grundlegender Reflex

<!-- view.html.erb -->
<button data-reflex="click->Counter#increment">Increment</button>

# app/reflexes/counter_reflex.rb
class CounterReflex < ApplicationReflex
  def increment
    @count = element.dataset[:count].to_i + 1
  end
end

Morph-Modi

Page Morph (Standard)

Rendert die gesamte Seite über die Controller-Aktion neu und überträgt Unterschiede in das DOM.

Selector Morph

# app/reflexes/example_reflex.rb
class ExampleReflex < ApplicationReflex
  def update_metric
    morph "#metric-display", render(partial: "metrics/metric", locals: { value: 42 })
  end
end

Nothing Morph

Führt serverseitige Logik aus, ohne das Client-DOM zu aktualisieren.

class ExampleReflex < ApplicationReflex
  def background_task
    LongRunningJob.perform_later
    morph :nothing
  end
end

Lebenszyklus-Methoden

Serverseitige Callbacks

class ExampleReflex < ApplicationReflex
  before_reflex :authenticate
  around_reflex :measure_time
  after_reflex :log_activity
end

Clientseitige generische Callbacks

beforeReflex(element, reflex, noop, reflexId): Vor dem Senden des WebSocket-Requests
reflexSuccess(element, reflex, noop, reflexId): Nach Ausführung des Reflex und DOM-Aktualisierung
reflexError(element, reflex, error, reflexId): Wenn der Server einen unbehandelten Fehler auslöst
reflexHalted(element, reflex, noop, reflexId): Wenn der Reflex mit throw :abort abgebrochen wird
afterReflex(element, reflex, noop, reflexId): Wird bei Erfolg und Misserfolg ausgeführt
finalizeReflex(element, reflex, noop, reflexId): Abschließender Bereinigungshook

DOM-Events

stimulus-reflex:before
stimulus-reflex:success
stimulus-reflex:error
stimulus-reflex:halted
stimulus-reflex:after
stimulus-reflex:connected
stimulus-reflex:disconnected
stimulus-reflex:ready

Praktische Muster

Formularverarbeitung

Reflexe, die innerhalb oder auf Formularelementen ausgelöst werden, serialisieren Eingaben automatisch in params.

Promise-Verkettung

this.stimulate('Comments#create')
  .then(() => this.showSuccess())
  .catch((err) => this.handleError(err))

Permanente Elemente

Markieren Sie Elemente mit data-reflex-permanent, damit sie von Full-Page-Morphs unberührt bleiben.

<div data-reflex-permanent>
  <video id="player" src="video.mp4" controls></video>
</div>

Referenzen

StimulusReflex-Dokumentation