foo: 'bob'
هيك ممكن نعمل override
71 Matching Annotations
- Last 7 days
-
alpinejs.dev alpinejs.dev
-
-
Properties defined in an x-data directive are available to all element children. Even ones inside other, nested x-data components.
جميع البيانات يتم توريثها للابناء
-
x-show="open"
اضهار او اخفاء العنصر
-
@click="
تنفيد اي كود js عند الضغط
-
x-data="{ open: false }
تعريف بيانات محلية علي مستوى DIV
-
-
livewire.laravel.com livewire.laravel.com
-
<button type="button" x-on:click="$wire.$refresh()">...</button>
اذا بدي استخدمها مع alpinejs
-
When the $refresh action is triggered, Livewire will make a server-roundtrip and re-render your component without calling any methods.
بتعي بناء الواجهة
-
refresh
أي تغييرات محليّة (مثل wire:model المؤجَّلة) تُطبّق على السيرفر أولًا ثم يُعاد الرندر.
لن يُستدعى mount() مرة أخرى. لكنه سيعيد تنفيذ ما في render() وأي خواص محسوبة/استعلامات داخلها.
لا يجري validate() ولا أي منطق إضافي إلا إذا كتبته أنت.
-
Refreshing a component
أكشن جاهز من Livewire تستدعيه مثل أي ميثود:
-
-
livewire.laravel.com livewire.laravel.com
-
false
بيمنع ارسال request يعني بصير طلب محلي
-
$wire.set('todo', '')
بيرسل ايضا request للسيرفر
-
<button x-on:click="$wire.todo = ''">Clear</button>
هذا يغيّر القيمة في المتصفح فقط (state المحليّة).
لا يرسل طلب للسيرفر الآن.
عند أول جولة لاحقة (أي اكشن Livewire أو submit…)، Livewire يزامن القيمة الجديدة مع السيرفر.
المفيد: تفاعل لحظي بدون شبكة.
-
Manipulating properties
طرق للتعديل من JS
-
Todo character length: <h2 x-text="$wire.todo.length"></h2>
الحقل مربوط بـ wire:model="todo"، فـ Livewire يبقي قيمة todo محدثة محليًا في المتصفح.
عندما تكتب، تتغيّر $wire.todo فورًا في المتصفح؛ لذلك x-text="$wire.todo.length" تظهر الطول مباشرة بدون أي request.
-
Livewire exposes a magic $wire object to Alpine. You can access the $wire object from any Alpine expression inside your Livewire component.
داخل أي مكوّن Livewire، عندك كائن سحري اسمه $wire متاح في Alpine.
$wire هو “نسخة جافاسكربت” من المكوّن: فيه نفس الخصائص والميثودز، لكن القراءة منه لا تُرسل طلبًا للسيرفر.
-
Supported PHP types:
انواع ثانية مدعومة
-
Array, String, Integer, Float, Boolean, and Null.
اول اشي livewire بحول القيم الي json قبل ارسالها في request وبعد وصولها الي class يحولها الي قيم صريحة التي حددناها و هذه القيم محدودة لان json لا يستطيع حمل كل انواع البيانات
-
Supported property types
القيم المدعومة
-
$this->todos[] = $this->pull('todo');
بهاي الدالة يمكننا اخذ القيمة و بعد اخدها حذفها ونمرر لها نص باسم المتغير الذي نريد قيمته و يتعرف livewire تلقائي علييه وجب ان يكون معرف و public
-
Pulling properties
سحب وافراغ القيم في خطوة واحدة
-
reset
نستخدم هذه الدالة لتفريغ اي متغير
-
Resetting properties
تفريف المتغيرات
-
wire:click="add"
الامر الذي سوف يقوم بنقل البيانات وتفعيل الميثود في. class
-
wire:model="todo"
عملية الربط مهمة
-
public $todo = '';
اولا تعريف المتغير التي سوف تستقبل البيانات
-
wire:model
نقوم باضافة هذه التاق علي field الذي سوف يحتوي علي البيانات وسوف يقوم بنقل البيانات عند حدوث عملية submit or save وتنتقل البيانات الي الميثود المربوطة به
-
Data binding
تمرير البيانات من الواجهة الي class
-
Bulk assignment
تعيين جماعي للقيم
-
within your component's mount()
يمكنك تهيئة العناصر داخل mount method
-
Initializing properties
تهيئة العناصر
-
-
livewire.laravel.com livewire.laravel.com
-
public Post $post;
او مباشرة من خلال تطابق الاسماء
-
public function mount(Post $post)
اولا من خلال mount
-
Using route model binding
طرق استلام البيانات
-
public function mount($id)
هنا يتم استقبال البيانات التي بعثت في route
-
Route::get('/posts/{id}', ShowPost::class);
من هنا بمرر البيانات
-
Accessing route parameters
تمرير بيانات من route
-
Setting additional layout file slots
اذا مثلا بدي اعمل @yield('style') بستخدم هاي الطريقة اول اشي لازم اني اعرف في layout ->. {{$style ?? ''}} بعدها لازم اني اروح علي component واضيف
<x-slot:syle>css<x-slost/>
-
->title('Create Post');
وهاي الطريقة الثانية من داخل render
-
#[Title('Create Post')]
الطريقة الاولى اني اضيف هاي الكود
-
Setting the page title
اذا بدي اغير title
-
->section('body');
برضو مهمة في حال كان اسم @yield ليس content بتضيف الاسم المخصص هنا
-
->extends('layouts.app');
مهمة جدا اذا انا بنيت layout مخصص واستخدمت في @yield لازم استخدم معو extends
-
#[Layout]
اذا بدي component معينة اعرضها في layout مختلف بضيف هاي فوق render
استخدم Attribute لما يكون الياوت ثابت وما تحتاج تمرير بيانات متغيّرة
-
Global layout configuration
كيفية تغيير layout الاساسي
-
Route::get('/posts/create', CreatePost::class);
هاي الطريقة عشان استدعي Component في Routes
-
Full-page components
استدعاء component ك صفحة كاملة
-
mount()
تحديث لاحق للمدخلات لا يعيد استدعاء mount()
-
mount()
أي قيمة تمرّرها في وسم المكوّن تُحقن في mount() كـ بارامترات: يعني البيانات بتنتقل نم باراميتر من ثم الي mount من ثم بتقدر تضيف عليها اي تعديلات ثم بتتخزن داخل public value
-
<livewire:create-post :title="$initialTitle" />
في حال كانت البيانات php يجب وضع نقطتين :
-
<livewire:create-post title="Initial Title" />
في حال كانت بيانات ثابتة بدون :
-
Passing data into components
تمرير البيانات الي components في حالتين
-
There are two ways to render a Livewire component on a page:
يمكن استدعاء component بطريقتين ١-من خلال استدعائها داخل صفحة ٢-من خلال جعلها صفحة كامل
-
<livewire:editor-posts.create-post />
وهيك اذا كانت داخل dir
-
<livewire:create-post />
هيك يتم استدعاء اي component
-
public function save()
يتم تشغيل هاي الفنقشن ك event مثلا في الفورم wire:submit="save" في هاي الحالة يتم تشغيل الفنقشن save
-
"Why isn't my component live updating as I type?" .prose .lw-tip pre:last-child { margin-bottom: 0px; }
إذا كتبت في الحقل وما شفت القيمة تتحدّث فورًا في الواجهة، هذا طبيعي في Livewire (v4).
Livewire صار يحدّث المكوّن فقط عند حدوث “Action” (زي ضغط زر submit أو wire:click) — مش مع كل ضغطة زر أثناء الكتابة.
الهدف: تقليل عدد الطلبات للسيرفر وتحسين الأداء.
لو بدك تحديث لحظي وأنت بتكتب، استخدم wire:model.live بدل wire:model.
-
Binding inputs to properties
تربط الحقل بالخاصية $title لكن في v4 لا يُرسل التحديث للسيرفر أثناء الكتابة.
Livewire يؤجّل الإرسال لغاية ما يصير Action (زي wire:click, submit …). هذا لتقليل الطلبات وتحسين الأداء.
-
wire:model="title"
تربط الحقل بالخاصية $title لكن في v4 لا يُرسل التحديث للسيرفر أثناء الكتابة.
Livewire يؤجّل الإرسال لغاية ما يصير Action (زي wire:click, submit …). هذا لتقليل الطلبات وتحسين الأداء.
-
:key="$post->id"
هاي ضرورية لما بدك تعمل loop وداخلو بدك تدخل Component لازم تضيف هاي الخاصية عشان livewire تقدر تطابق البيانات مع بعض
-
:$post
اختصار ل 'post' => $post
وهو تمرير بيانات ل كمبوننت يمكن استلام البيانات استلام البيانات اما من خلال mount($post) or public Post $post;
-
Adding wire:key to @foreach loops
مهمة جدا اي بيانات بدك تعمل عليها loop لازم توضعها داخل root وتعطي الخاصية wire:key='' ولازم يكون فريد عشان ال livewire يطابق العناصرمع بعض
-
with()
تستخدم لتمرير البيانات الي الواجهة لانو احيانا public مش مناسبة لجميع السيناريوهات لانها بتخضع ل حماية و تعامل مختلف فيمكنك استخدام with
-
Livewire components have properties that store data and can be easily accessed within the component's class and Blade view. This section discusses the basics of adding a property to a component and using it in your application.
يتكم الجزء اني بقدر اعمل متغيرات داخل Class تكون public واستدعيها في blade مثل ما يوضح في الصورة
-
Customizing component stubs
لما تعمل صفحة جديدة بكون في ملفات افتراضية يتم انشائها اذا بدي اخصص الملف اول ما اعملو شو يكون داخلو بنفذ الكوماند المرفق وبعدل ببساطة الملفات الافتراضية لانشاء الملفات
-
Omitting the render method
اذا حذفت render function تلقائيا livewire رح تبحث علي اول view يتطابق اسمه مع اسم Control وتبعثو للواجهة
-
php artisan make:livewire CreatePost --inline
لما تعمل Component بضمن html داخل نفس Class يعني بنشاء ملف واحد في App/Livewire وما بعمل ملف داخل view
-
->layout()
نستطيع من خلالها تحديد اي layout نريد تمرير البيانات له
return view('livewire.posts.index') ->layout('components.layouts.app', ['title' => 'Latest Posts']); // تمُرِّر بيانات للّياوت أيضًا
-
php artisan make:livewire CreatePost
كوماند مخصص لانشاء Component ينتج عن تنفيد هذا الكوماند ملفين
CLASS: app/Livewire/Counter.php المنطق VIEW: resources/views/livewire/counter.blade.php الواجهة
-
sub-directory
اذا بدي اعمل الملفات داخل مجلد
-
-
livewire.laravel.com livewire.laravel.com
-
.hover
بيقوم بتحميل الصفحة اول ما تعمل تمرر الماوس على الرابط
-
wire:navigate
**يمنع اعادة التحميل الكاملة للصفحة يجلب الصفحة من خلال ajax بيبدل المحتوى القديم بالجديد بشكل يشبه Single Page Application **
-