ورقة غش 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 Modes)

تحويل الصفحة الكاملة (Page Morph - افتراضي)

يعيد تصيير الصفحة بالكامل عبر إجراء المتحكم ويدمج الفروقات بدقة داخل 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

دوال دورة الحياة (Lifecycle Methods)

ردود نداء الخادم (Server-side Callbacks)

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

ردود نداء العميل العامة

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

أنماط عملية

التعامل مع النماذج (Form Handling)

تقوم الـ Reflexes التي يتم إطلاقها داخل أو على عناصر النماذج تلقائياً بتسلسل المدخلات وتمريرها داخل params.

تسلسل الوعود (Promise Chaining)

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

العناصر الدائمة (Permanent Elements)

قم بتمييز العناصر بـ data-reflex-permanent حتى تتجاهلها عمليات morph الخاصة بالصفحة الكاملة.

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

مراجع

توثيق StimulusReflex