Συνοπτικός οδηγός StimulusReflex

Βασικές Έννοιες

Το StimulusReflex επιτρέπει τη δημιουργία διαδραστικών διεπαφών πραγματικού χρόνου στο Rails χρησιμοποιώντας WebSockets (ActionCable) και CableReady.

Βασικό 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 (Morph Modes)

Page Morph (Προεπιλογή)

Επανασχεδιάζει ολόκληρη τη σελίδα μέσω του controller και ενσωματώνει τις διαφορές στο 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

Εκτελεί λογική στον εξυπηρετητή χωρίς να ενημερώνει το DOM του πελάτη.

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

Μέθοδοι Κύκλου Ζωής

Callbacks πλευράς εξυπηρετητή (Server-side)

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

Γενικά Callbacks πλευράς πελάτη (Client-side)

beforeReflex(element, reflex, noop, reflexId): Πριν από την αποστολή του αιτήματος WebSocket
reflexSuccess(element, reflex, noop, reflexId): Μετά την εκτέλεση του reflex και την ενημέρωση του DOM
reflexError(element, reflex, error, reflexId): Όταν ο διακομιστής εγείρει μη διαχειρίσιμο σφάλμα
reflexHalted(element, reflex, noop, reflexId): Όταν το reflex διακόπτεται με throw :abort
afterReflex(element, reflex, noop, reflexId): Εκτελείται τόσο σε επιτυχία όσο και σε αποτυχία
finalizeReflex(element, reflex, noop, reflexId): Τελικό άγκιστρο εκκαθάρισης

Συμβάντα DOM

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

Πρακτικά Μοτίβα

Χειρισμός Φορμών

Τα Reflexes που ενεργοποιούνται σε στοιχεία φόρμας σειριοποιούν αυτόματα τα πεδία και τα περνούν στο params.

Αλυσίδες Υποσχέσεων (Promise Chaining)

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

Μόνιμα Στοιχεία (Permanent Elements)

Επισημάνετε στοιχεία με data-reflex-permanent ώστε να μην επηρεάζονται από καθολικά morphs σελίδας.

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

Πηγές & Αναφορές

Τεκμηρίωση StimulusReflex