يوفر Livewire v4 خطافات 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();
});
});خطافات دورة حياة المكون
// عند تهيئة المكون
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);
});خطافات العناصر
// عند إضافة عناصر جديدة لـ 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();
}
});