شبكة تعلم مع ناو

ووردبريس*جافاسكربت*لينكس-برمجة عامة

جافاسكربت developer_modeتطوير الويب

تاريخ التحديث:

Alpine.js الدليل الشامل

يوفر Alpine.js الدليل الشامل شرح واضح وسهل على كيفية تثبيت Alpine.js مع الأمثلة العملية التي تساعد على فهم أساسيات اطار العمل هذا وتطبيقه.

اسم الدليل: Alpine.js

رقم الدليل: 601

المجال: جافاسكربت

المتطلبات: معرفة أساسية بتطوير الويب

رابط مستودع الكود: Github

قم بتحميل هذا الدليل كملف الكتروني PDF
شاهد الأساسيات مع 7 مشاريع عملية

تاريخ تحديث الدليل:

فهرس الدليل

مقدمة عن Alpine.js

Alpine.js هو إطار عمل JavaScript خفيف يستخدم لإضافة تفاعلية وسلوك ديناميكي إلى صفحات الويب بسهولة. يركز على تبسيط كتابة الكود بتقنيات HTML و JavaScript، دون الحاجة إلى تحميل مكتبات ضخمة مثل Vue.js أو React. يعتبر خيارًا مثاليًا لتطبيقات بسيطة تحتاج إلى تحسين تجربة المستخدم.

تثبيت Alpine.js

1. التثبيت باستخدام CDN

أبسط طريقة لاستخدام Alpine.js هي عن طريق إضافته إلى مشروعك من خلال رابط CDN. كل ما عليك فعله هو إضافة هذا السطر داخل وسم <head> أو في نهاية ملف الـ HTML قبل وسم الإغلاق <body>:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
HTML

بهذا، Alpine.js سيكون جاهز للاستخدام في أي مكان بصفحتك دون الحاجة إلى إعدادات إضافية.

2. التثبيت باستخدام NPM

إذا كنت تستخدم مدير حزم مثل NPM وتفضل تضمين Alpine.js ضمن مشروعك، يمكنك تثبيته عبر هذا الأمر:

npm install alpinejs
JavaScript

وبعد التثبيت، قم باستيراد المكتبة في ملف JavaScript الخاص بك:

import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
JavaScript

بهذه الطريقة، يمكنك التحكم بشكل أكبر في كيفية تحميل واستخدام Alpine.js ضمن مشروعك.

3. التأكد من التثبيت

قم بإنشاء ملف html فيه المعلومات التالية:

<html>
<head>
    <script defer 
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">
</script>
</head>
<body>
    <h1 x-data="{ message: 'Hello, from Alpine' }" x-text="message"></h1>
</body>
</html>
HTML

إذا ظهر لك Hello, from Alpine في المتصفح، هذا يعني أنك قمت بالتثبيت بنجاح.

الأساسيات

x-data

المفهوم

تستخدم لإنشاء نطاق بيانات تفاعلي (reactive data) داخل عنصر (والعناصر الفرعية له) على الصفحة. هذا يعني أن البيانات الموجودة داخل x-data ستكون تفاعلية، أي أن أي تغييرات تُجرى على هذه البيانات ستؤدي إلى تحديث تلقائي للـ DOM (الواجهة)، مما يجعل التفاعل مع البيانات مرنًا وسهلاً.

كيف تعمل

  1. x-data هو حاوية لحفظ حالة العنصر، أي البيانات التي ترغب في تتبعها والتفاعل معها (مثل العدادات، قيم المدخلات، أو القيم الديناميكية الأخرى).
  2. عند استخدام x-data، يصبح العنصر تفاعليًا، مما يعني أنه سيتم تحديث الـ DOM تلقائيًا عند تغيير البيانات دون الحاجة للتلاعب اليدوي بالـ JavaScript.
<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">
    </script>
</head>
<body>
   <div x-data="{ name: 'Nawras' }">
    <h1 x-text="name"></h1> <!-- Nawras -->
    </div>
</body>
</html>
HTML

مثال على استخدام x-data

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">
    </script>
</head>
<body>
   <div x-data="{ name: 'Nawras', age: 200, salary: 80000 }">
    <h1 x-text="name"></h1> <!-- Nawras -->
    <p x-text="age"></p> <!-- 200 -->
    <p x-text="salary"></p> <!-- 80000 -->
    </div>
</body>
</html>
HTML

x-text

المفهوم

يستخدم لربط النص داخل عنصر مع قيمة من البيانات التفاعلية. يعمل x-text على تحديث النص داخل العنصر تلقائيًا عندما تتغير البيانات المرتبطة به. باستخدام x-text، يمكنك عرض أو تحديث النص داخل عنصر HTML بناءً على القيم المتغيرة في x-data أو البيانات التفاعلية الأخرى.

كيف يعمل

  1. x-text يقوم بتغيير النص داخل العنصر الذي يتم تطبيقه عليه ليعكس قيمة البيانات التفاعلية أو التعبير الذي قمت بتمريره له.
  2. عند تغيير قيمة البيانات المرتبطة بـ x-text, يتم تحديث النص داخل العنصر تلقائيًا دون الحاجة إلى إعادة تحميل الصفحة أو التعامل مع DOM باستخدام JavaScript.

مثال على استخدام x-text

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">
    </script>
</head>
<body>
   <div x-data="{ username: 'Ali' }">
    <h1 x-text="username"></h1> <!-- Ali -->
    </div>
</body>
</html>
HTML

x-show

المفهوم

يُستخدم لإظهار أو إخفاء عنصر بناءً على قيمة من البيانات التفاعلية. عندما تتغير القيمة المرتبطة بـ x-show, فإن العنصر سيظهر أو يختفي على الصفحة بشكل ديناميكي. بشكل عام، هو يستخدم للتحكم في الرؤية أو الظهور للعناصر على الصفحة.

كيف يعمل

  1. x-show يقوم بتطبيق خاصية display على العنصر بناءً على القيمة المُعطاة له.
  2. عندما تكون القيمة المرتبطة بـ x-showصحيحة (مثل true أو قيمة غير فارغة)، يتم إظهار العنصر
  3. .عندما تكون القيمة خطأ (مثل false أو null)، يتم إخفاء العنصر.

مثال على استخدام x-show

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">
    </script>
</head>
<body>
   <div x-data="{ username: 'Ali', password: '123', showPassword: true }">
    <h1 x-text="username"></h1> <!-- Ali -->
    <p  x-show='showPassword' x-text="password"></p> <!-- 123 -->
    </div>
</body>
</html>
HTML

x-on:click

المفهوم

تستخدم للانتباه إلى حدث النقر (click) على عنصر معين. عند النقر على العنصر، يتم تنفيذ الأكواد أو التغييرات التي تحددها في هذا الحدث Event.

كيف يعمل

  1. عند استخدام x-on:click، يحدد Alpine.js أنه عندما يتم النقر على العنصر، يتم تنفيذ الكود المرتبط بهذا الحدث.
  2. يمكنك من التفاعل مع المستخدم من خلال استجابة معينة للنقر على الأزرار أو العناصر الأخرى.

مثال على استخدام x-on:click

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">
    </script>
</head>
<body>
   <div x-data="{ username: 'Ali', password: '123', showPassword: false }">
    <h1 x-text="username"></h1> <!-- Ali -->
    <button x-on:click="showPassword=true">Show Password</button>
    <p  x-show='showPassword' x-text="password"></p> <!-- 123 -->
    </div>
</body>
</html>
HTML

يمكنك استخدام الاختصار @click بدلاً من x-on:click. كلاهما يؤدي نفس الوظيفة، ولكن الاختصار @click يعتبر أكثر بساطة وسهولة في الكتابة.

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">
    </script>
</head>
<body>
   <div x-data="{ username: 'Ali', password: '123', showPassword: false }">
    <h1 x-text="username"></h1> <!-- Ali -->
    <button @click="showPassword=true">Show Password</button>
    <p  x-show='showPassword' x-text="password"></p> <!-- 123 -->
    </div>
</body>
</html>
HTML

المزيد من الأساسيات

x-init

المفهوم

يُستخدم لتنفيذ تعليمات JavaScript عند تحميل المكون (component) لأول مرة، أي عندما يتم تهيئة المكون أو العنصر الذي يحتوي عليه. يساعد في تنفيذ الأكواد أو إعداد القيم الأولية للبيانات عند بدء تشغيل العنصر.

كيف تعمل

  1. يتم استخدام x-init لتشغيل كود عند تحميل الصفحة أو تهيئة الكائن التفاعلي.
  2. يمكن استخدامه لإعداد القيم الافتراضية، أو لتشغيل دوال JavaScript أو أي عملية تحتاج إلى أن تحدث بمجرد أن يبدأ العنصر في الظهور على الصفحة
<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">
    </script>
</head>
<body>
   <div x-data="{ name: '' }" x-init="name = 'Ali'">
    <h1 x-text="name"></h1> <!-- Ali -->
    </div>
</body>
</html>
HTML

ادارة التفاعلات في دالة

المفهوم

من الممكن إضافة البيانات والدوال مباشرة في الكود HTML باستخدام x-data و x-init، لكن في بعض الأحيان يكون من الأفضل إدارة هذه التفاعلات داخل دوال JavaScript خارج HTML، مما يسهل تنظيم الكود ويجعله أكثر قابلية للصيانة والقراءة.

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
  <div x-data="initData()">
    <h1 x-text="username"></h1> <!-- Ali -->
    <button x-on:click="showPassword=true">Show Password</button>
    <p  x-show='showPassword' x-text="password"></p> <!-- 123 -->
  </div>
    
  <script>
      function initData(){
          return {
               username: "Ali",
               password: "123",
               showPassword: false
          }
      }
  </script>
</body>
</html>
HTML

النماذج Forms

x-model

المفهوم

يُستخدم لربط القيم التفاعلية بين واجهة المستخدم (HTML) وبين البيانات (Data) الخاصة بك في JavaScript. يعمل هذا الموجه على مزامنة البيانات بين الحقول المدخلة (مثل input أو textarea) والقيم التي يتم تخزينها داخل المكون (داخل x-data).

باستخدام x-model، يمكن ربط القيم المدخلة في النماذج أو الحقول النصية بالبيانات في الجافا سكربت، مما يجعل التفاعل مع النموذج أسهل وأسرع. عندما يُدخل المستخدم قيمة في الحقل المرتبط بـ x-model، يتم تحديث البيانات تلقائيًا.

كيف تعمل

  1. الربط التلقائي: عندما يغير المستخدم قيمة في عنصر مُرتبط بـ x-model، يتم تحديث البيانات تلقائيًا.
  2. الانتقال من البيانات إلى الواجهة: إذا تم تحديث القيمة في البيانات داخل x-data, سيتم تحديث العنصر في HTML الذي يرتبط بـ x-model تلقائيًا.
<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="initData()">
        <h1>
            Hello, <span x-text="username"></span>
            <span x-text="password"></span>
        </h1>
        <hr />
        
        <form>
            <input type="text" x-model="username" placeholder="Provide your username">
            <input type="password" x-model="password" placeholder="Enter your password">
        </form>
    </div>

    <script>
        function initData() {
            return {
                username: "",
                password: "",
            }
        }
    </script>
</body>
</html>
HTML

@submit

يتم تنفيذ التعليمات الموجودة في submit event عند تقديم نموذج ما.

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="initData()">
        <h1>
            Hello, <span x-text="username"></span>
            <span x-text="password"></span>
        </h1>
        <hr />
        
        <form @submit.prevent="submitForm">
            <input type="text" x-model="username" placeholder="Provide your username">
            <input type="password" x-model="password" placeholder="Enter your password">
            <button type="submit">Submit Form</button>
        </form>
    </div>
    
    <script>
        function initData() {
            return {
                username: "",
                password: "",
                submitForm() {
                    alert("Submitted");
                }
            }
        }
    </script>
</body>
</html>
HTML

التحقق من المدخلات

يمكن التحقق من المدخلات وعرض رسالة خطأ أو نجاح كما في المثال التالي:

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="initData()">
        <h1>
            Hello, 
            <span x-text="username"></span>
            <span x-text="password"></span>
        </h1>
        <hr />
        
        <!-- Message Section: Displays error or success message -->
        <div class="message">
            <p class="error" x-show="showError" x-text="errorMessage"></p>
            <p class="success" x-show="showSuccess" x-text="successMessage"></p>
        </div>

        <!-- Form Section -->
        <form @submit.prevent="submitForm">
            <input type="text" x-model="username" placeholder="Provide your username">
            <input type="password" x-model="password" placeholder="Enter your password">
            <button type="submit">Submit Form</button>
        </form>
    </div>
    
    <script>
        function initData() {
            return {
                username: "",
                password: "",
                showError: false,
                showSuccess: false,
                errorMessage: "",
                successMessage: "",
                
                // Handle form submission
                submitForm() {
                    // Reset error and success states
                    this.showError = false;
                    this.showSuccess = false;
                    
                    // Validate username
                    if (!this.username) {
                        this.errorMessage = "You must provide a username";
                        this.showError = true;
                        return;
                    }
                    
                    // Validate password
                    if (!this.password) {
                        this.errorMessage = "You must provide a password";
                        this.showError = true;
                        return;
                    }
                    
                    // If form is valid, show success message
                    this.showSuccess = true;
                    this.successMessage = "The form has been submitted successfully";
                }
            }
        }
    </script>
</body>
</html>
HTML

آلية عمل الكود

1- تهيئة البيانات (x-data):

  • يقوم الكود بتخزين البيانات داخل دالة initData التي تحتوي على المتغيرات التالية:
    • username: لتخزين اسم المستخدم.
    • password: لتخزين كلمة المرور.
    • showError: لتحديد ما إذا كان يجب عرض رسالة الخطأ.
    • showSuccess: لتحديد ما إذا كان يجب عرض رسالة النجاح.
    • errorMessage: لتخزين رسالة الخطأ.
    • successMessage: لتخزين رسالة النجاح.

2- التفاعل مع النموذج:

  • عند تقديم النموذج عبر الزر إرسال:
    • يتم التحقق أولًا إذا كان حقل اسم المستخدم فارغًا أو كلمة المرور فارغة.
    • إذا كان أحد الحقلين فارغًا، يتم عرض رسالة خطأ.
    • إذا كانت المدخلات صحيحة، يتم إخفاء رسائل الخطأ وعرض رسالة نجاح.

3- التحقق من المدخلات (دالة submitForm):

  • إذا كان حقل اسم المستخدم فارغًا: تظهر رسالة خطأ تطلب إدخال اسم المستخدم.
  • إذا كان حقل كلمة المرور فارغًا: تظهر رسالة خطأ تطلب إدخال كلمة المرور.
  • إذا كانت الحقول كاملة: تظهر رسالة نجاح تؤكد أن النموذج تم إرساله بنجاح.

4- الرسائل التفاعلية:

  • رسالة خطأ: تظهر فقط إذا كانت المدخلات غير كاملة (x-show="showError").
  • رسالة نجاح: تظهر فقط إذا كانت المدخلات صحيحة (x-show="showSuccess").

x-bind

x-bind يُستخدم لربط قيمة ديناميكية إلى سمة (attribute) معينة لعنصر HTML. يتيح لك تعديل الخصائص (مثل href, src, class, style, وغيرها) بناءً على البيانات في Alpine.js.

في المثال السابق، يمكن اضافة CSS Class بشكل ديناميكي لرسالة الخطأ أو النجاح.

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    
    <style>
        .red{background: red;color: white;}
        .green{background: green;color: white;}
    </style>
</head>
<body>
    <div x-data="initData()">
        <h1>
            Hello, 
            <span x-text="username"></span>
            <span x-text="password"></span>
        </h1>
        <hr />
        
        <!-- Message Section: Displays error or success message -->
        <div class="message" x-bind:class="{'red': showError, 'green': showSuccess}">
            <p class="error" x-show="showError" x-text="errorMessage"></p>
            <p class="success" x-show="showSuccess" x-text="successMessage"></p>
        </div>

        <!-- Form Section -->
        <form @submit.prevent="submitForm">
            <input type="text" x-model="username" placeholder="Provide your username">
            <input type="password" x-model="password" placeholder="Enter your password">
            <button type="submit">Submit Form</button>
        </form>
    </div>
    
    <script>
        function initData() {
            return {
                username: "",
                password: "",
                showError: false,
                showSuccess: false,
                errorMessage: "",
                successMessage: "",
                
                // Handle form submission
                submitForm() {
                    // Reset error and success states
                    this.showError = false;
                    this.showSuccess = false;
                    
                    // Validate username
                    if (!this.username) {
                        this.errorMessage = "You must provide a username";
                        this.showError = true;
                        return;
                    }
                    
                    // Validate password
                    if (!this.password) {
                        this.errorMessage = "You must provide a password";
                        this.showError = true;
                        return;
                    }
                    
                    // If form is valid, show success message
                    this.showSuccess = true;
                    this.successMessage = "The form has been submitted successfully";
                }
            }
        }
    </script>
</body>
</html>
HTML

آلية عمل الكود

الكود يستخدم x-bind:class لإضافة أو إزالة CSS Classes بناءً على قيم البيانات:

  • إذا كانت showError تساوي true، يتم إضافة red.
  • إذا كانت showSuccess تساوي true، يتم إضافة green.

بمعنى آخر، red و green تتغير بشكل ديناميكي استنادًا إلى قيم المتغيرات في البيانات.

في Alpine.js، يمكنك استخدام اختصار x-bind عن طريق استخدام : بدلاً من كتابة x-bind: بالكامل. هذا يجعل الكود أكثر نظافة وأسهل في القراءة.

Example:
<button x-bind:disabled="isDisabled">Submit</button>
<button :disabled="isDisabled">Submit</button>
HTML

العرض الشرطي والتكراري

x-for

يُستخدم لتكرار عناصر معينة داخل قائمة أو مجموعة من البيانات، مثل المصفوفات. عند استخدامه، يُنشئ مكررًا للعناصر تلقائيًا بناءً على بيانات معينة. يمكنك التفكير فيه كطريقة لإنشاء العناصر بشكل ديناميكي باستخدام بنية قائمة (مثل <ul> أو <table>)، وتسهيل عرض المحتوى من المصفوفات أو الكائنات داخل الكود دون الحاجة إلى كتابة العناصر بشكل يدوي.

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="listData()">
        <h2>Product List</h2>
        
        <ul>
            <template x-for="item in items" :key="item.id">
                <li>
                    <span x-text="item.title"></span>: 
                    <span x-text="item.price"></span> USD
                </li>
            </template>
        </ul>
    </div>

    <script>
        function listData() {
            return {
                items: [
                    { id: 1, title: "Product 1", price: "50" },
                    { id: 2, title: "Product 2", price: "60" },
                    { id: 3, title: "Product 3", price: "70" },
                    { id: 4, title: "Product 4", price: "0" },
                    { id: 5, title: "Product 5", price: "0" }
                ]
            }
        }
    </script>
</body>
</html>
HTML

لماذا نستخدم template في Alpine.js؟

  1. لا يظهر في DOM: عنصر <template> لا يتم عرضه في DOM، بل يُستخدم فقط كـ “قالب” (أو هيكل) يمكن تكراره. هذا يسمح بإنشاء عناصر متعددة دون إدخال عناصر HTML إضافية لا داعي لها.
  2. تحسين الأداء: عند وضع x-for على <template>، يقوم Alpine بنسخ المحتوى داخل القالب وتكراره مباشرةً في الـ DOM. هذا الأسلوب يكون أسرع وأخفّ، ويسمح لـ Alpine بإدارة العناصر المتكررة بشكل أكثر كفاءة.
  3. وضوح الكود: استخدام <template> يجعل الكود أوضح، حيث يدل المطورين على أن المحتوى بداخله هو للتكرار فقط، ويجعل الكود منظمًا وسهل القراءة.

يُستخدم العنصر <template> كعنصر حاوية لهيكل الكود الذي تريد تكراره عدة مرات، ولكن template لا يظهر فعليًا في صفحة HTML النهائية.

توضيح الكود

<ul>
 <template x-for="item in items" :key="item.id">
   <li>
      <span x-text="item.title"></span>: 
      <span x-text="item.price"></span> USD
   </li>
  </template>
</ul>
HTML

هذا الكود يستخدم Alpine.js لإنشاء قائمة (ul) من المنتجات (items) حيث يتم عرض كل منتج (item) على شكل عنصر قائمة (li) يتضمن عنوان المنتج وسعره.

يمرّ على كل عنصر في مصفوفة items، ويعرض تفاصيل كل منتج مثل العنوان والسعر داخل عنصر <li>.

  • x-for="item in items": يكرّر العناصر في مصفوفة items.
  • :key="item.id": يستخدم id من كل عنصر كـ “مفتاح” لتسريع إعادة التحديث.
  • داخل التكرار، يتم عرض العنوان والسعر باستخدام x-text.

بشكل عام، يستخدم x-for لتكرار HTML بناءً على مجموعة من البيانات في Alpine.js.

x-if

المفهوم

تستخدم لعرض أو إخفاء العناصر بناءً على شرط معين. عندما يكون الشرط صحيحًا، يتم إضافة العنصر إلى DOM (الشجرة الهيكلية للصفحة)؛ وعندما يكون الشرط غير صحيح، يتم إزالته.

كيف تعمل

  1. x-if=”condition”: إذا كانت القيمة في condition صحيحة (مثل true أو أي قيمة غير فارغة)، سيظهر العنصر في الصفحة.
  2. إذا كانت القيمة غير صحيحة (مثل false أو null)، سيتم إزالة العنصر بالكامل من الصفحة.
<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="listData()">
        <h2>Product List</h2>
        
        <ul>
            <template x-for="item in items" :key="item.id">
                <template x-if="item.price >= 60">
                <li>
                    <span x-text="item.title"></span>: 
                    <span x-text="item.price"></span> USD
                </li>
                </template>
            </template>
        </ul>
    </div>

    <script>
        function listData() {
            return {
                items: [
                    { id: 1, title: "Product 1", price: "50" },
                    { id: 2, title: "Product 2", price: "60" },
                    { id: 3, title: "Product 3", price: "70" },
                    { id: 4, title: "Product 4", price: "0" },
                    { id: 5, title: "Product 5", price: "0" }
                ]
            }
        }
    </script>
</body>
HTML

توضيح الكود

  • <template x-if="item.price >= 60">: يتحقق من إذا كان سعر العنصر (item.price) أكبر من أو يساوي 60.
    • إذا كانت القيمة true، سيتم عرض الـ <li> داخل الـ <template>.
    • إذا كانت القيمة false، فلن يتم عرض العنصر.
  • <li>: يعرض تفاصيل العنصر إذا كانت الشروط (item.price >= 60) صحيحة، بما في ذلك:
    • <span x-text="item.title"></span>: يعرض عنوان المنتج.
    • <span x-text="item.price"></span> USD: يعرض سعر المنتج متبوعًا بـ “USD”.

ببساطة: الكود يستخدم x-if لعرض العناصر التي يكون سعرها أكبر من أو يساوي 60.

x-if يقوم بإضافة أو إزالة العنصر من DOM بشكل كامل، بينما x-show يختبئ العنصر باستخدام CSS (يبقى في DOM).

التوجيهات المتقدمة في Alpine.js

x-html

في Alpine.js، يُستخدم x-html لتحديد محتوى HTML ديناميكي لعناصر HTML مباشرةً من خلال ربطه بمتغير أو نص يحتوي على HTML. يشبه هذا الأمر x-text، ولكنه يسمح بإدراج HTML بدلًا من النص العادي. يعتبر x-html مفيدًا لعرض محتوى HTML معقد يتم إنشاؤه ديناميكيًا أو جلبه من مصدر خارجي.

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="initData()">
      <h1 x-text="title"></h1>
      <div x-html="content"></div>
    </div>

    <script>
        function initData() {
            return {
               title : "Post Title",
               content: "<strong>hello</strong> <small>small text</small>"
                
            }
        }
    </script>
</body>
</html>
HTML

عند استخدام x-html في Alpine.js، يجب الحذر من الثغرات الأمنية المتعلقة بـ XSS (البرمجة النصية عبر المواقع) إذا كانت البيانات التي يتم عرضها من مصدر خارجي أو غير موثوق. نظرًا لأن x-html يعرض HTML مباشرة، قد يؤدي إدخال محتوى غير موثوق إلى حقن تعليمات برمجية خبيثة داخل الصفحة، مما يعرض المستخدمين للخطر.

x-transition

x-transition في Alpine.js هي خاصية تُستخدم لتطبيق تأثيرات الانتقال (animations) على العناصر عند ظهورها أو اختفائها، مما يجعل التفاعل أكثر سلاسة وجمالاً. يمكن استخدام x-transition مع عناصر مثل x-show، بحيث تتحرك العناصر تدريجيًا عند ظهورها أو اختفائها بدلاً من أن تظهر أو تختفي فجأة.

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="initData()">
         
         <button @click="showDiv = !showDiv">
                Show/Hide
         </button>
         
         <div x-show="showDiv" x-html="content" x-transition></div>
         <div x-show="showDiv" x-html="content" x-transition.duration.5000ms></div>
         <div x-show="showDiv" x-html="content" x-transition.scale.20  x-transition.duration.10000ms></div>
         <div x-show="showDiv" x-html="content" x-transition.opacity  x-transition.duration.15000ms></div>
    </div>

    <script>
        function initData() {
            return {
              showDiv: false, 
              content: ` <header><h1>Welcome to My Website</h1><p>This is a simple content page.</p></header>` 
            }
        }
    </script>
</body>
</html>
HTML

في هذا الكود، x-transition هو خاصية في Alpine.js تُستخدم لإضافة تأثيرات انتقاليّة عند إظهار أو إخفاء العناصر. تُستخدم لإضافة تأثيرات مثل التلاشي، التحجيم، أو التلاشي التدريجي عند تغيير حالة العنصر.

كيفية عمل x-transition:

  1. الانتقال البسيط: x-transition: يُضيف تأثير انتقالي افتراضي عند تغيير حالة العنصر، مثل التلاشي التدريجي.
  2. تحديد مدة الانتقال: x-transition.duration.5000ms: يُحدد مدة الانتقال بـ 5 ثواني.
  3. تأثيرات متعددة:
    • x-transition.scale.20: يُضيف تأثير مقياس حيث يتغير حجم العنصر.
    • x-transition.opacity: يُضيف تأثير تلاشي حيث يصبح العنصر أكثر شفافية تدريجيًا.
    • x-transition.duration.10000ms: يُحدد مدة الانتقال بـ 10 ثواني.

باختصار، x-transition يضيف تأثيرات بصرية لجعل تغيير حالة العنصر (ظهوره أو اختفائه) أكثر سلاسة وجاذبية.

x-effect

x-effect في Alpine.js هو خاصية تُستخدم لتنفيذ تأثيرات أو تغييرات على العناصر بناءً على تغيّر القيم في الـ x-data. يعمل مثل الـ “watchers” في React أو Vue، حيث يراقب المتغيرات ويُنفذ التعليمات البرمجية عندما تتغير هذه القيم.

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="initData()">
         
         <button @click="count++" >
                Show/Hide
         </button>
         
         <p x-text="count" x-effect="console.log(`changed the count ${count}`)"></p>
    <script>
        function initData() {
            return {
              count: 0, 
            }
        }
    </script>
</body>
</html>
HTML

الخاصية x-effect="console.log('changed the count', count)" تعني أنه في كل مرة يتغير فيها المتغير count، سيتم تنفيذ الكود داخل x-effect، والذي في هذه الحالة هو طباعة رسالة في وحدة التحكم (console.log) تحتوي على القيمة الجديدة لـ count

x-ignore

x-ignore في Alpine.js هو خاصية تُستخدم لإخبار Alpine.js بتجاهل عنصر أو خاصية معينة أثناء عملية التفاعل مع البيانات. عند استخدام x-ignore، سيتم تعطيل التفاعل الخاص بـ Alpine.js على العنصر أو الخاصية المحددة.

<html>
  <head>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>
  <body>
    <div x-data="initData()">
      <p x-text="label">lala</p>
      <hr />
      <div x-ignore>
        <p x-text="label">lala</p>
      </div>
    </div>
    <script>
      function initData() {
        return {
          label: 'Hello world',
        };
      }
    </script>
  </body>
</html>
HTML

في هذا الكود، x-ignore تُستخدم في العنصر <div> لتوجيه Alpine.js بتجاهل أي تفاعل داخل هذا العنصر مع البيانات أو التفاعلات.

التوضيح:

  • العنصر الأول <p x-text="label">lala</p> سيعرض القيمة Hello world لأن Alpine.js يتفاعل مع المتغير label داخل x-data.
  • العنصر الثاني داخل <div x-ignore> يحتوي على نفس العنصر <p x-text="label">lala</p>. لكن بسبب استخدام x-ignore، Alpine.js يتجاهل التفاعل مع هذا العنصر، ولن يغير محتوى النص المعروض داخل هذا العنصر حتى لو تغيرت قيمة label.

باختصار، x-ignore يجعل Alpine.js يتجاهل التفاعل مع البيانات داخل العنصر المحدد، لذا العنصر الثاني سيعرض النص الثابت “lala” ولن يتأثر بالقيمة المتغيرة لـ label.

x-cloak

x-cloak في Alpine.js هو خاصية تُستخدم لإخفاء العناصر مؤقتًا حتى يتم تحميل جميع البيانات والتفاعلات الخاصة بـ Alpine.js. يُستخدم بشكل أساسي لتجنب عرض العناصر بشكل مؤقت قبل أن يبدأ Alpine.js في تفعيل التفاعلات عليها.

<html>
  <head>
    <style>
      .green,
      .red {
        color: white;
        padding: 10px;
        font-size: 18px;
      }
      .green {
        background: green;
      }
      .red {
        background: red;
      }
      [x-cloak] {
        display: none;
      }
    </style>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>
  <body>
    <div x-data="initData()">
      <h1 class="red" x-show="showName" x-text="name1" x-cloak></h1>
      <h1 class="green" x-show="showName" x-text="name2"></h1>
    </div>
    <script>
      function initData() {
        return {
          name1: 'Ali',
          name2: 'Nawras',
          showName: false,
        };
      }
    </script>
  </body>
</html>
HTML

في هذا الكود، x-cloak تُستخدم لإخفاء العنصر بشكل مبدئي حتى يتم تحميل وتفعيل Alpine.js.

التوضيح:

  • العنصر الأول (<h1 class="red" x-show="showName" x-text="name1" x-cloak>) سيكون مخفيًا عند تحميل الصفحة بفضل x-cloak.
  • العنصر الثاني (<h1 class="green" x-show="showName" x-text="name2">) سيظهر ويختفي بناءً على قيمة showName ولكن بدون استخدام x-cloak.

عند تحميل الصفحة:

x-cloak يضمن أن العنصر الأول لن يظهر قبل أن يتم تفعيل Alpine.js.

كلا العنصرين سيكونان مخفيين لأن showName يبدأ كـ false.

x-teleport

x-teleport في Alpine.js يُستخدم لنقل ( teleport) عنصر من مكان إلى آخر في DOM (شجرة المستند) بدون تغيير حالته أو بياناته. يسمح لك هذا بنقل محتوى من جزء معين من الصفحة إلى مكان آخر، مثل داخل نافذة منبثقة أو مكون آخر.

<html>
  <head>
    <style>
      .modal {
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 20px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 10px;
      }
    </style>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>
  <body>
    <div x-data="{ open: false }">
      <!-- Button to toggle the modal -->
      <button @click="open = !open">Toggle Modal</button>

      <!-- The modal content will be teleported to the body -->
      <template x-teleport="body">
        <div x-show="open" x-transition class="modal">
          <p>This is a modal!</p>
          <button @click="open = false">Close</button>
        </div>
      </template>
    </div>
  </body>
</html>
HTML

ففي هذا الكود، x-teleport تُستخدم لنقل محتوى النافذة المنبثقة (المودال) إلى مكان آخر في الصفحة، تحديدًا إلى عنصر <body>، بدلاً من إبقائها داخل نفس الحاوية الأصلية.

كيف يعمل الكود؟

  • x-data="{ open: false }": يقوم بتعريف حالة open، والتي تبدأ بالقيمة false، مما يعني أن النافذة المنبثقة مغلقة في البداية.
  • <button @click="open = !open">Toggle Modal</button>: زر يقوم بتبديل حالة open بين true و false عند الضغط عليه، مما يفتح أو يغلق النافذة المنبثقة.
  • <template x-teleport="body">: هذا الجزء ينقل (أو “يُرسل”) محتوى النافذة المنبثقة إلى عنصر <body> ليظهر في أعلى الصفحة، بدلًا من إبقائه داخل <div x-data>.
  • x-show="open": يجعل النافذة تظهر فقط إذا كانت حالة open تساوي true.
  • x-transition: يضيف تأثير انتقال (ظهور تدريجي) عندما يتم فتح أو إغلاق النافذة.

الهدف من x-teleport

x-teleport يساعد في تجنب أي مشاكل تتعلق بمكان النافذة المنبثقة داخل صفحة الويب، مثل تداخلها مع عناصر أخرى أو مشاكل التنسيق.

الخصائص السحرية

$el

في Alpine.js، الخاصية $el تُستخدم للإشارة إلى العنصر (HTML element) الحالي الذي يتم تنفيذ الكود فيه.

<html>
  <head>
    <style>
      .text {
        background: rgba(0, 0, 0, 0.7);
        color: white;
      }
    </style>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>
  <body>
    <div x-data="{}">
      <p
        class="text"
        @mouseenter="$el.innerHTML = 'you are changed'"
        @mouseleave="$el.innerHTML = 'Change me'"
      >
        Change me
      </p>
    </div>
  </body>
</html>
HTML

$refs

$refs في Alpine.js هي طريقة للوصول إلى عناصر HTML داخل الكود الجافاسكريبت المرتبط بـAlpine، بحيث تُمكّنك من التعامل مع هذه العناصر مباشرةً.

<html>
  <head>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>
  <body>
    <div x-data="{ state: false }">
      <button
        @click="state = !state; state ? $refs.text.textContent = 'changed' : $refs.text.textContent = 'Old Text'"
      >
        Change the text
      </button>
      <span x-ref="text">Old Text</span>
    </div>
  </body>
</html>
HTML

في هذا الكود، يتم استخدام x-ref لتعيين مرجع (ref) لعنصر HTML، بحيث يمكن الوصول إليه مباشرة من خلال Alpine.js باستخدام $refs.

كيف يعمل x-ref هنا:

  • في العنصر <span x-ref="text">Old Text</span>، x-ref="text" يعين مرجعًا لهذا العنصر باسم “text”.
  • باستخدام $refs.text، يمكنك الوصول إلى هذا العنصر مباشرة في الكود.

في الكود:

  • عند النقر على الزر، يتم تعديل النص داخل العنصر <span> عن طريق $refs.text.textContent.
  • إذا كانت حالة state صحيحة، يتم تغيير النص إلى “changed”، وإذا كانت الحالة خاطئة، يبقى النص “Old Text”.

بعد دراستك لكل هذا الدليل، ستكون على دراية بأساسيات Alpine وسيكون لديك القدرة على إنشاء مشروع متكامل باستخدام Alpine.

شاهد الدليل الشامل ككورس تعليمي متكامل مع 7 مشاريع عملية من خلال الرابط الآتي: أساسيات AlpineJS مع 7 مشاريع عملية

تواصل معي

يسرني التواصل معكم عبر البريد الإلكتروني

mail at LearnWithNaw dot net

كيف أستطيع تسهيل أعمالك؟