محمود الحبشمتاح لمشاريع جديدة
  • أعماليأعمالي
  • الخدماتالخدمات
  • المختبرالمختبر
  • المقالاتالمقالات
  • تواصلتواصل
عمّان--:--EN
المقالات/لايف واير

خطافات JavaScript في Livewire v4

اربط بدورة حياة Livewire من JavaScript.

1 فبراير 2026دقيقة قراءةلايف وايرRead in English

في هذه الصفحة

  1. خطافات دورة حياة الطلب
  2. خطافات دورة حياة المكون
  3. خطافات العناصر

يوفر Livewire v4 خطافات JavaScript للتكامل مع دورة حياة المكون.

خطافات دورة حياة الطلب

javascript
// الربط بكل طلب Livewire
Livewire.hook('request', ({ uri, options, payload, respond, succeed, fail }) => {
    // قبل إرسال الطلب
    console.log('الطلب يبدأ...', payload);
    
    // بعد استجابة ناجحة
    succeed(({ status, json }) => {
        console.log('الطلب نجح!', status);
    });
    
    // بعد استجابة فاشلة
    fail(({ status, content, preventDefault }) => {
        console.error('الطلب فشل!', status);
        // منع المعالجة الافتراضية للخطأ
        preventDefault();
    });
});

خطافات دورة حياة المكون

javascript
// عند تهيئة المكون
Livewire.hook('component.init', ({ component, cleanup }) => {
    console.log('المكون تمت تهيئته:', component.name);
    
    // التنظيف عند تدمير المكون
    cleanup(() => {
        console.log('المكون تم تدميره');
    });
});

// قبل تحويل DOM
Livewire.hook('morph.updating', ({ el, component, toEl, skip, childrenOnly }) => {
    // تخطي التحويل لعناصر محددة
    if (el.hasAttribute('data-no-morph')) {
        skip();
    }
});

// بعد تحويل DOM
Livewire.hook('morph.updated', ({ el, component }) => {
    // إعادة تهيئة المكتبات الخارجية
    initTooltips(el);
});

خطافات العناصر

javascript
// عند إضافة عناصر جديدة لـ DOM
Livewire.hook('element.init', ({ el, component }) => {
    // تهيئة أي JS خاص بالعنصر
    if (el.hasAttribute('data-chart')) {
        initChart(el);
    }
});

// قبل إزالة العنصر
Livewire.hook('element.removing', ({ el, component, skip }) => {
    // التنظيف قبل الإزالة
    if (el.chart) {
        el.chart.destroy();
    }
});
كل المقالات

تابع القراءة

  • التفويض في مكونات Livewire v41 فبراير 2026دقيقة قراءة
  • مترجم Blaze المسبق: مكاسب أداء هائلة في Livewire v41 فبراير 2026دقيقة قراءة
  • بناء ميزة الإشارات المرجعية مع Livewire v41 فبراير 2026دقيقة قراءة