|
@@ -1,3 +1,5 @@
|
|
|
|
|
+<div dir="rtl">
|
|
|
|
|
+
|
|
|
# Alpine.js
|
|
# Alpine.js
|
|
|
|
|
|
|
|
|
|
|
|
@@ -35,41 +37,69 @@
|
|
|
|
|
|
|
|
**باستعمال CDN:** أضف السطر البرمجي التالي في نهاية `<head>`.
|
|
**باستعمال CDN:** أضف السطر البرمجي التالي في نهاية `<head>`.
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
سيقوم Alpine.js بتهيئة نفسه، سهلة أليس كذلك!
|
|
سيقوم Alpine.js بتهيئة نفسه، سهلة أليس كذلك!
|
|
|
|
|
|
|
|
في بيئات التطوير، نوصي باستعمال إصدار محدّد كما في الرابط، لتجنب حدوث مشاكل غير متوقعة أو تصادمها مع الإصدارات الحديثة. على سبيل المثال، لإستخدام الإصدار الأخير (2.8.0) يمكنك كتابة:
|
|
في بيئات التطوير، نوصي باستعمال إصدار محدّد كما في الرابط، لتجنب حدوث مشاكل غير متوقعة أو تصادمها مع الإصدارات الحديثة. على سبيل المثال، لإستخدام الإصدار الأخير (2.8.0) يمكنك كتابة:
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
**باستعمال NPM:** قم بتنصيب الحزمة من NPM.
|
|
**باستعمال NPM:** قم بتنصيب الحزمة من NPM.
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```js
|
|
```js
|
|
|
npm i alpinejs
|
|
npm i alpinejs
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
قم باستدعائها وتضمينها في مشروعك.
|
|
قم باستدعائها وتضمينها في مشروعك.
|
|
|
|
|
+
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```js
|
|
```js
|
|
|
import 'alpinejs'
|
|
import 'alpinejs'
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
**لدعم نسخة المتصفّح IE11** يرجى استعمال السُطور البرمجية التالية بدلاً عن السابق.
|
|
**لدعم نسخة المتصفّح IE11** يرجى استعمال السُطور البرمجية التالية بدلاً عن السابق.
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
|
|
<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
|
|
|
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>
|
|
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>
|
|
|
```
|
|
```
|
|
|
|
|
+
|
|
|
|
|
+</div>
|
|
|
|
|
|
|
|
لو تُلاحظ في السطور أعلاه كتبنا [module/nomodule pattern](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) ، تسمح هذه الأنماط للمتصفحات الحديث تحميل مجموعة الوحدات بشكل تلقائي، بينما ستقوم IE11 والمتصفحات القديمة الأخرى تحميل وحدات IE11 تلقائياً.
|
|
لو تُلاحظ في السطور أعلاه كتبنا [module/nomodule pattern](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) ، تسمح هذه الأنماط للمتصفحات الحديث تحميل مجموعة الوحدات بشكل تلقائي، بينما ستقوم IE11 والمتصفحات القديمة الأخرى تحميل وحدات IE11 تلقائياً.
|
|
|
|
|
|
|
|
## طريقة الاستخدام
|
|
## طريقة الاستخدام
|
|
|
|
|
|
|
|
القائمة المنسدلة (Dropdown) والنوافذ (Modal)
|
|
القائمة المنسدلة (Dropdown) والنوافذ (Modal)
|
|
|
|
|
+
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-data="{ open: false }">
|
|
<div x-data="{ open: false }">
|
|
|
<button @click="open = true">فتح القائمة</button>
|
|
<button @click="open = true">فتح القائمة</button>
|
|
@@ -83,8 +113,13 @@ import 'alpinejs'
|
|
|
</div>
|
|
</div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
*علامات التبويب (Tabs)*
|
|
*علامات التبويب (Tabs)*
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-data="{ tab: 'foo' }">
|
|
<div x-data="{ tab: 'foo' }">
|
|
|
<button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
|
|
<button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
|
|
@@ -95,10 +130,15 @@ import 'alpinejs'
|
|
|
</div>
|
|
</div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
يمكنك أيضاً استخدامه في أماكن أخرى:
|
|
يمكنك أيضاً استخدامه في أماكن أخرى:
|
|
|
|
|
|
|
|
*التحضير المُسبق (Pre-fetching) لمُحتوى HTML.*
|
|
*التحضير المُسبق (Pre-fetching) لمُحتوى HTML.*
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-data="{ open: false }">
|
|
<div x-data="{ open: false }">
|
|
|
<button
|
|
<button
|
|
@@ -116,6 +156,9 @@ import 'alpinejs'
|
|
|
</div>
|
|
</div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
## الشرح
|
|
## الشرح
|
|
|
|
|
|
|
|
هناك إجمالي 14 موجّهاً مُتاحا:
|
|
هناك إجمالي 14 موجّهاً مُتاحا:
|
|
@@ -124,7 +167,7 @@ import 'alpinejs'
|
|
|
| --: | --: |
|
|
| --: | --: |
|
|
|
| [`x-data`](#x-data) | إعلان أو تعريف حقل (Scope) جديد للمكوّن. |
|
|
| [`x-data`](#x-data) | إعلان أو تعريف حقل (Scope) جديد للمكوّن. |
|
|
|
| [`x-init`](#x-init) | ينفّذ تعليمات برمجية عند تشغيل إحدى المكوّنات. |
|
|
| [`x-init`](#x-init) | ينفّذ تعليمات برمجية عند تشغيل إحدى المكوّنات. |
|
|
|
-| [`x-show`](#x-show) | إظهار أو إزالة العناصر بناء على التعبيرات المنطقية `display: none;` صحيحة أو خاطئة. |
|
|
|
|
|
|
|
+| [`x-show`](#x-show) | إظهار أو إزالة العناصر بناء على التعبيرات المنطقية <span dir="ltr">`display: none;`</span> صحيحة أو خاطئة. |
|
|
|
| [`x-bind`](#x-bind) | يضبط قيمة السّمة (attribute) على حسب نتائج تعليمات الجافاسكربت. |
|
|
| [`x-bind`](#x-bind) | يضبط قيمة السّمة (attribute) على حسب نتائج تعليمات الجافاسكربت. |
|
|
|
| [`x-on`](#x-on) | يربط المُنصِت للأحداث (event listener) بالعنصر، يتم تنفيذ تعليمات الجافاسكربت عند التفاعل معه. |
|
|
| [`x-on`](#x-on) | يربط المُنصِت للأحداث (event listener) بالعنصر، يتم تنفيذ تعليمات الجافاسكربت عند التفاعل معه. |
|
|
|
| [`x-model`](#x-model) | يضيف اتصال للبيانات ثنائي الإتجاه "two-way data binding" حيث أن القيم الذي يُدخلها المستخدم تتم مزامنتها مع قيمة بيانات العنصر للمكوّن. |
|
|
| [`x-model`](#x-model) | يضيف اتصال للبيانات ثنائي الإتجاه "two-way data binding" حيث أن القيم الذي يُدخلها المستخدم تتم مزامنتها مع قيمة بيانات العنصر للمكوّن. |
|
|
@@ -141,12 +184,12 @@ import 'alpinejs'
|
|
|
|
|
|
|
|
| الخصائص السحرية | الوصف |
|
|
| الخصائص السحرية | الوصف |
|
|
|
| --: | --: |
|
|
| --: | --: |
|
|
|
-| [`$el`](#el) | ترجع فرع DOM الخاص بالمكوّن الأساسي (root component). |
|
|
|
|
|
-| [`$refs`](#refs) | يسترجع عناصر DOM المميّزة بـ `x-ref` داخل المكوّن. |
|
|
|
|
|
-| [`$event`](#event) | يرجع كائن الحدث "Event" الأصلي داخل المُتنصت لأحداث المستخدم. |
|
|
|
|
|
-| [`$dispatch`](#dispatch) | ينشئ حدثاً مخصصا `CustomEvent` ويرسله داخلياً باستخدام `.dispatchEvent()`. |
|
|
|
|
|
-| [`$nextTick`](#nexttick) | بعد معالجة Alpine لتحديث DOM يتم تنفيذ تعليمات برمجية. |
|
|
|
|
|
-| [`$watch`](#watch) | يقوم باستدعاء callback تم تحديده مسبقاً عندما يتم تعديل خاصية المُراقب "watched" |
|
|
|
|
|
|
|
+| <span dir="ltr">[`$el`](#el)</span> | ترجع فرع DOM الخاص بالمكوّن الأساسي (root component). |
|
|
|
|
|
+| <span dir="ltr">[`$refs`](#refs)</span> | يسترجع عناصر DOM المميّزة بـ `x-ref` داخل المكوّن. |
|
|
|
|
|
+| <span dir="ltr">[`$event`](#event)</span> | يرجع كائن الحدث "Event" الأصلي داخل المُتنصت لأحداث المستخدم. |
|
|
|
|
|
+| <span dir="ltr">[`$dispatch`](#dispatch)</span> | ينشئ حدثاً مخصصا `CustomEvent` ويرسله داخلياً باستخدام <span dir="ltr">`.dispatchEvent()`</span>. |
|
|
|
|
|
+| <span dir="ltr">[`$nextTick`](#nexttick)</span> | بعد معالجة Alpine لتحديث DOM يتم تنفيذ تعليمات برمجية. |
|
|
|
|
|
+| <span dir="ltr">[`$watch`](#watch)</span> | يقوم باستدعاء callback تم تحديده مسبقاً عندما يتم تعديل خاصية المُراقب "watched" |
|
|
|
|
|
|
|
|
|
|
|
|
|
## الرعاة
|
|
## الرعاة
|
|
@@ -169,9 +212,9 @@ import 'alpinejs'
|
|
|
|
|
|
|
|
### `x-data`
|
|
### `x-data`
|
|
|
|
|
|
|
|
-**المثال:** `<div x-data="{ foo: 'bar' }">...</div>`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<div x-data="{ foo: 'bar' }">...</div>`</span>
|
|
|
|
|
|
|
|
-**البُنية:** `<div x-data="[object literal]">...</div>`
|
|
|
|
|
|
|
+**البُنية:** <span dir="ltr">`<div x-data="[object literal]">...</div>`</span>
|
|
|
|
|
|
|
|
تعرّف `x-data` حقل/نطاق جديد للمكوّن، يخبر Alpine بتهيئة المكوّن الجديد بكائن البيانات المعرّف والمحدّد مسبقاً.
|
|
تعرّف `x-data` حقل/نطاق جديد للمكوّن، يخبر Alpine بتهيئة المكوّن الجديد بكائن البيانات المعرّف والمحدّد مسبقاً.
|
|
|
|
|
|
|
@@ -181,6 +224,8 @@ import 'alpinejs'
|
|
|
|
|
|
|
|
يمكنك من استخراج مصدر البيانات والتعاملات ذات الصّلة إلى دوال قابلة لإعادة الاستخدام.
|
|
يمكنك من استخراج مصدر البيانات والتعاملات ذات الصّلة إلى دوال قابلة لإعادة الاستخدام.
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-data="dropdown()">
|
|
<div x-data="dropdown()">
|
|
|
<button x-on:click="open">فتح</button>
|
|
<button x-on:click="open">فتح</button>
|
|
@@ -202,47 +247,60 @@ import 'alpinejs'
|
|
|
</script>
|
|
</script>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-> لمستخدمي مجمّع الوحدات (bundler): يرجى ملاحظة أن الدوال التي يصل إليها Alpine.js في النطاق العام (window). فلاستخدام x-data يجب أن تصرّحها إلى `window`. على سبيل المثال `window.dropdown = function () {}` (لأنه في Webpack ،Rollup ،Parcel وما إلى ذلك، الدّوال التي تكتبتها تكون بشكل إفتراضي ضِمن نطاق الوحدة "module" وليس في نطاق الصفحة `window`).
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+> لمستخدمي مجمّع الوحدات (bundler): يرجى ملاحظة أن الدوال التي يصل إليها Alpine.js في النطاق العام (window). فلاستخدام x-data يجب أن تصرّحها إلى `window`. على سبيل المثال <span dir="ltr">`window.dropdown = function () {}`</span> (لأنه في Webpack ،Rollup ،Parcel وما إلى ذلك، الدّوال التي تكتبتها تكون بشكل إفتراضي ضِمن نطاق الوحدة "module" وليس في نطاق الصفحة `window`).
|
|
|
|
|
|
|
|
|
|
|
|
|
يمكنك أيضاً دمج عدة كائنات متعددة معاً باستخدام محلّل الكائنات (object destructuring).
|
|
يمكنك أيضاً دمج عدة كائنات متعددة معاً باستخدام محلّل الكائنات (object destructuring).
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-data="{...dropdown(), ...tabs()}">
|
|
<div x-data="{...dropdown(), ...tabs()}">
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
### `x-init`
|
|
### `x-init`
|
|
|
-**المثال:** `<div x-data="{ foo: 'bar' }" x-init="foo = 'baz'"></div>`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<div x-data="{ foo: 'bar' }" x-init="foo = 'baz'"></div>`</span>
|
|
|
|
|
|
|
|
-**البُنية:** `<div x-data="..." x-init="[expression]"></div>`
|
|
|
|
|
|
|
+**البُنية:** <span dir="ltr">`<div x-data="..." x-init="[expression]"></div>`</span>
|
|
|
|
|
|
|
|
ينفّذ `x-init` تعليمات برمجية عند تشغيل وتهيئة إحدى المكوّنات.
|
|
ينفّذ `x-init` تعليمات برمجية عند تشغيل وتهيئة إحدى المكوّنات.
|
|
|
|
|
|
|
|
-إذا أردت تنفيذ التعليمات البرمجية بعد أن يجري Alpine تحديثه على DOM (مُماثل لـ `mounted()` في Vue.js) يمكنك إرجاع callback من `x-init` وسيتم تشغيله بعدها:
|
|
|
|
|
|
|
+إذا أردت تنفيذ التعليمات البرمجية بعد أن يجري Alpine تحديثه على DOM (مُماثل لـ <span dir="ltr">`mounted()`</span> في Vue.js) يمكنك إرجاع callback من `x-init` وسيتم تشغيله بعدها:
|
|
|
|
|
|
|
|
-`x-init="() => { // يمكننا الوصول إلى DOM بعد تهيئته // }"`
|
|
|
|
|
|
|
+<span dir="ltr"> `x-init="() => { // يمكننا الوصول إلى DOM بعد تهيئته // }"` </span>
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
### `x-show`
|
|
### `x-show`
|
|
|
-**المثال:** `<div x-show="open"></div>`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<div x-show="open"></div>`</span>
|
|
|
|
|
|
|
|
-**البُنية:** `<div x-show="[expression]"></div>`
|
|
|
|
|
|
|
+**البُنية:** <span dir="ltr">`<div x-show="[expression]"></div>`</span>
|
|
|
|
|
|
|
|
-تمكّننا `x-show` من إظهار أو إزالة العناصر بناء على التعبيرات المنطقية `display: none;` صحيحة أو خاطئة.
|
|
|
|
|
|
|
+تمكّننا `x-show` من إظهار أو إزالة العناصر بناء على التعبيرات المنطقية <span dir="ltr">`display: none;`</span> صحيحة أو خاطئة.
|
|
|
|
|
|
|
|
**x-show.transition**
|
|
**x-show.transition**
|
|
|
|
|
|
|
|
`x-show.transition` عبارة عن واجهة "API" يمكنها تحسين `x-show` وجعله أكثر جمالية باستخدام تأثيرات CSS transitions.
|
|
`x-show.transition` عبارة عن واجهة "API" يمكنها تحسين `x-show` وجعله أكثر جمالية باستخدام تأثيرات CSS transitions.
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-show.transition="open">
|
|
<div x-show.transition="open">
|
|
|
يتم عمل تأثير بصري بالظهور "in" و الإختفاء "out"
|
|
يتم عمل تأثير بصري بالظهور "in" و الإختفاء "out"
|
|
|
</div>
|
|
</div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
| التوجيهات | الوصف |
|
|
| التوجيهات | الوصف |
|
|
|
| ---: | ---: |
|
|
| ---: | ---: |
|
|
|
| `x-show.transition` | يتلاشى ويتقلص بمرور الوقت (opacity, scale: 0.95, timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), duration-in: 150ms, duration-out: 75ms). |
|
|
| `x-show.transition` | يتلاشى ويتقلص بمرور الوقت (opacity, scale: 0.95, timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), duration-in: 150ms, duration-out: 75ms). |
|
|
@@ -258,21 +316,27 @@ import 'alpinejs'
|
|
|
|
|
|
|
|
> ملاحظة: يمكنك دمج جميع التاثيرات مع بعضها البعض (على الرغم من أنها غريبة ربما): `x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.85.out.duration.200ms.origin.bottom.left.opacity.scale.95`
|
|
> ملاحظة: يمكنك دمج جميع التاثيرات مع بعضها البعض (على الرغم من أنها غريبة ربما): `x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.85.out.duration.200ms.origin.bottom.left.opacity.scale.95`
|
|
|
|
|
|
|
|
-> ملاحظة: سينتظر `x-show` إلى حين أن تنتهني جميع التأثيرات، إذا كنت تريد تجاهلها، أضف المعدّل `.immediate`
|
|
|
|
|
|
|
+> ملاحظة: سينتظر `x-show` إلى حين أن تنتهني جميع التأثيرات، إذا كنت تريد تجاهلها، أضف المعدّل <span dir="ltr">`.immediate`</span>
|
|
|
|
|
+
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-show.immediate="open">
|
|
<div x-show.immediate="open">
|
|
|
<div x-show.transition="open">
|
|
<div x-show.transition="open">
|
|
|
</div>
|
|
</div>
|
|
|
```
|
|
```
|
|
|
|
|
+
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
### `x-bind`
|
|
### `x-bind`
|
|
|
|
|
|
|
|
-> ملاحظة: يمكنك اختصار الكتابة باستعمال النقطتين ":" كـ `:type="..."`
|
|
|
|
|
|
|
+> ملاحظة: يمكنك اختصار الكتابة باستعمال النقطتين ":" كـ <span dir="ltr">`:type="..."`</span>
|
|
|
|
|
|
|
|
-**المثال:** `<input x-bind:type="inputType">`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<input x-bind:type="inputType">`</span>
|
|
|
|
|
|
|
|
-**البُنية:** `<input x-bind:[attribute]="[expression]">`
|
|
|
|
|
|
|
+**البُنية:** <span dir="ltr">`<input x-bind:[attribute]="[expression]">`</span>
|
|
|
|
|
|
|
|
يضبط قيمة السّمة (attribute) على حسب نتائج تعليمات الجافاسكربت. ويمكن لهذه التعليمات أن تصل الى جميع بيانات المكوّن. ويتم تحديثه في كل مرة يتم فيها تحديث بياناته.
|
|
يضبط قيمة السّمة (attribute) على حسب نتائج تعليمات الجافاسكربت. ويمكن لهذه التعليمات أن تصل الى جميع بيانات المكوّن. ويتم تحديثه في كل مرة يتم فيها تحديث بياناته.
|
|
|
|
|
|
|
@@ -285,7 +349,7 @@ import 'alpinejs'
|
|
|
بالنسبة للأصناف (classes) قم بتمرير كائن يكون مفتاحه هو إسم الفئة، وقيم هذه الأزواج عبارة عن تعبيرات منطقية تحدّد ما إذا كان يتم تطبيق الصنف على العنصر أم لا.
|
|
بالنسبة للأصناف (classes) قم بتمرير كائن يكون مفتاحه هو إسم الفئة، وقيم هذه الأزواج عبارة عن تعبيرات منطقية تحدّد ما إذا كان يتم تطبيق الصنف على العنصر أم لا.
|
|
|
|
|
|
|
|
كمثال:
|
|
كمثال:
|
|
|
-`<div x-bind:class="{ 'hidden': foo }"></div>`
|
|
|
|
|
|
|
+<span dir="ltr">`<div x-bind:class="{ 'hidden': foo }"></div>`</span>
|
|
|
|
|
|
|
|
في هذا المثال يتم تطبيق الصنف "hidden" فقط عندما تكون قيمة foo صحيحة `true`.
|
|
في هذا المثال يتم تطبيق الصنف "hidden" فقط عندما تكون قيمة foo صحيحة `true`.
|
|
|
|
|
|
|
@@ -294,6 +358,9 @@ import 'alpinejs'
|
|
|
يدعم `x-bind` المتغيرات بالإضافة إلى تعبيرات الجافاسكربت في حالة إذا كانت تُرجع قيمة منطقية صحيحة أو خاطئة (`true` أو `false`).
|
|
يدعم `x-bind` المتغيرات بالإضافة إلى تعبيرات الجافاسكربت في حالة إذا كانت تُرجع قيمة منطقية صحيحة أو خاطئة (`true` أو `false`).
|
|
|
|
|
|
|
|
كمثال:
|
|
كمثال:
|
|
|
|
|
+
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<!-- العبارة: -->
|
|
<!-- العبارة: -->
|
|
|
<button x-bind:disabled="myVar">إضغطني</button>
|
|
<button x-bind:disabled="myVar">إضغطني</button>
|
|
@@ -305,6 +372,8 @@ import 'alpinejs'
|
|
|
<button>Click me</button>
|
|
<button>Click me</button>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
هنا تتم إضافة السمة `disabled` أو إزالتها بناءً على قيمة المتغيّر `myVar`.
|
|
هنا تتم إضافة السمة `disabled` أو إزالتها بناءً على قيمة المتغيّر `myVar`.
|
|
|
|
|
|
|
|
تدعم كذلك Alpine سمات منطقية مختلفة HTML specification كـ: `disabled`,`readonly`,`required`,`checked`,`hidden`,`selected`,`open` وغيرها.
|
|
تدعم كذلك Alpine سمات منطقية مختلفة HTML specification كـ: `disabled`,`readonly`,`required`,`checked`,`hidden`,`selected`,`open` وغيرها.
|
|
@@ -318,11 +387,11 @@ import 'alpinejs'
|
|
|
|
|
|
|
|
### `x-on`
|
|
### `x-on`
|
|
|
|
|
|
|
|
-> ملاحظة: يمكنك اختصار الكتابة باستعمال النقطتين ":" كـ `@click="..."`
|
|
|
|
|
|
|
+> ملاحظة: يمكنك اختصار الكتابة باستعمال النقطتين ":" كـ <span dir="ltr">`@click="..."`</span>
|
|
|
|
|
|
|
|
-**المثال:** `<button x-on:click="foo = 'bar'"></button>`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<button x-on:click="foo = 'bar'"></button>`</span>
|
|
|
|
|
|
|
|
-**البُنية:** `<button x-on:[event]="[expression]"></button>`
|
|
|
|
|
|
|
+**البُنية:** <span dir="ltr">`<button x-on:[event]="[expression]"></button>`</span>
|
|
|
|
|
|
|
|
يقوم x-on بإرفاق المُنصت للأحداث (event listener). عندما يتم حدث (event) من قِبل المستخدم يتم تنفيذ تعليمات الجافاسكربت المحددة.
|
|
يقوم x-on بإرفاق المُنصت للأحداث (event listener). عندما يتم حدث (event) من قِبل المستخدم يتم تنفيذ تعليمات الجافاسكربت المحددة.
|
|
|
|
|
|
|
@@ -330,125 +399,134 @@ import 'alpinejs'
|
|
|
|
|
|
|
|
> ملاحظة: اختياريًا، يمكن أيضًا تحديد اسم دالة JavaScript.
|
|
> ملاحظة: اختياريًا، يمكن أيضًا تحديد اسم دالة JavaScript.
|
|
|
|
|
|
|
|
-**المثال:** `<button x-on:click="myFunction"></button>`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<button x-on:click="myFunction"></button>`</span>
|
|
|
|
|
|
|
|
-هذه تكافئ: `<button x-on:click="myFunction($event)"></button>`
|
|
|
|
|
|
|
+هذه تكافئ: <span dir="ltr">`<button x-on:click="myFunction($event)"></button>`</span>
|
|
|
|
|
|
|
|
-**المُعدّل `keydown` **
|
|
|
|
|
|
|
+**المُعدّل `keydown`**
|
|
|
|
|
|
|
|
-**المثال:** `<input type="text" x-on:keydown.escape="open = false">`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<input type="text" x-on:keydown.escape="open = false">`</span>
|
|
|
|
|
|
|
|
يمكنك الإستجابة لأحداث معينة ينقر عليها المستخدم في لوحة المفاتيح باستخدام المعدّلات `x-on:keydown`. يرجى ملاحظة أن هذا المُعدّل يستخدم صيغة kebab-case لتسمية قيم `Event.key`.
|
|
يمكنك الإستجابة لأحداث معينة ينقر عليها المستخدم في لوحة المفاتيح باستخدام المعدّلات `x-on:keydown`. يرجى ملاحظة أن هذا المُعدّل يستخدم صيغة kebab-case لتسمية قيم `Event.key`.
|
|
|
|
|
|
|
|
أمثلة: `enter`, `escape`, `arrow-up`, `arrow-down`
|
|
أمثلة: `enter`, `escape`, `arrow-up`, `arrow-down`
|
|
|
|
|
|
|
|
-> يمكننا كذلك الإستجابة أزرار لوحة المفاتيح الأساسية كـ `x-on:keydown.cmd.enter="foo"`
|
|
|
|
|
|
|
+> يمكننا كذلك الإستجابة أزرار لوحة المفاتيح الأساسية كـ <span dir="ltr">`x-on:keydown.cmd.enter="foo"`</span>
|
|
|
|
|
|
|
|
-**المُعدّل `.away`**
|
|
|
|
|
|
|
+**المُعدّل <span dir="ltr">`.away`</span>**
|
|
|
|
|
|
|
|
-**المثال:** `<div x-on:click.away="showModal = false"></div>`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<div x-on:click.away="showModal = false"></div>`</span>
|
|
|
|
|
|
|
|
لا يتم تنفيذ تعبير Event Handler إلا إذا لم يتم تشغيل الحدث بواسطة العنصر نفسه (أو مكوناته الفرعية).
|
|
لا يتم تنفيذ تعبير Event Handler إلا إذا لم يتم تشغيل الحدث بواسطة العنصر نفسه (أو مكوناته الفرعية).
|
|
|
|
|
|
|
|
هذا مفيد لإخفاء القوائم المنسدلة والنوافذ عندما ينقر المستخدم في مكان آخر.
|
|
هذا مفيد لإخفاء القوائم المنسدلة والنوافذ عندما ينقر المستخدم في مكان آخر.
|
|
|
|
|
|
|
|
-**المُعدّل `.prevent`**
|
|
|
|
|
-**المثال:** `<input type="checkbox" x-on:click.prevent>`
|
|
|
|
|
|
|
+**المُعدّل <span dir="ltr">`.prevent`</span>**
|
|
|
|
|
+**المثال:** <span dir="ltr">`<input type="checkbox" x-on:click.prevent>`</span>
|
|
|
|
|
|
|
|
-تؤدي إضافة `.prevent` إلى مستمع الحدث إلى استدعاء منع `preventDefault` في الحدث الذي سيتم تنفيذه. في المثال أعلاه، هذا يعني أن مربع الاختيار لن يتم تحديده بالفعل عندما ينقر المستخدم عليه.
|
|
|
|
|
|
|
+تؤدي إضافة <span dir="ltr">`.prevent`</spam> إلى مستمع الحدث إلى استدعاء منع `preventDefault` في الحدث الذي سيتم تنفيذه. في المثال أعلاه، هذا يعني أن مربع الاختيار لن يتم تحديده بالفعل عندما ينقر المستخدم عليه.
|
|
|
|
|
|
|
|
-**المُعدّل`.stop`**
|
|
|
|
|
-**المثال::** `<div x-on:click="foo = 'bar'"><button x-on:click.stop></button></div>`
|
|
|
|
|
|
|
+**المُعدّل <span dir="ltr">`.stop`</span>**
|
|
|
|
|
+**المثال::** <span dir="ltr">`<div x-on:click="foo = 'bar'"><button x-on:click.stop></button></div>`</span>
|
|
|
|
|
|
|
|
-إضافة `.stop` إلى المتصنّت للأحداث يستدعي `stopPropagation.` في المثال أعلاه، يعني أن الحدث "click" لن ينتقل إلى `<div>` الخارجي. بمعنى آخر، عندما ينقر المستخدم على الزر، لا يتم تعريف `foo` على أنه `bar`.
|
|
|
|
|
|
|
+إضافة <span dir="ltr">`.stop`</span> إلى المتصنّت للأحداث يستدعي `stopPropagation.` في المثال أعلاه، يعني أن الحدث "click" لن ينتقل إلى `<div>` الخارجي. بمعنى آخر، عندما ينقر المستخدم على الزر، لا يتم تعريف `foo` على أنه `bar`.
|
|
|
|
|
|
|
|
-**المُعدّل `.self`**
|
|
|
|
|
-**المثال:** `<div x-on:click.self="foo = 'bar'"><button></button></div>`
|
|
|
|
|
|
|
+**المُعدّل <span dir="ltr">`.self`</span>**
|
|
|
|
|
+**المثال:** <span dir="ltr">`<div x-on:click.self="foo = 'bar'"><button></button></div>`</span>
|
|
|
|
|
|
|
|
-إضافة .self إلى المتصنّت للأحداث إلى تشغيل الحدث فقط إذا كان `$event.target` و نفسه العنصر. في المثال أعلاه، يعني أنه عند النقر على الزر "button" لن يتم تشغيل الحدث
|
|
|
|
|
|
|
+إضافة .self إلى المتصنّت للأحداث إلى تشغيل الحدث فقط إذا كان <span dir="ltr">`$event.target`</span> و نفسه العنصر. في المثال أعلاه، يعني أنه عند النقر على الزر "button" لن يتم تشغيل الحدث
|
|
|
|
|
|
|
|
-**المُعدّل `.window`**
|
|
|
|
|
-**المثال:** `<div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>`
|
|
|
|
|
|
|
+**المُعدّل <span dir="ltr">`.window`</span>**
|
|
|
|
|
+**المثال:** <span dir="ltr">`<div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>`</span>
|
|
|
|
|
|
|
|
-إضافة `.window` إلى مستمع الأحداث، سيقوم بتثبيت المتصنّت للأحداث على نافذة المتصفّح كله `window` بدلاً من DOM الذي قمت بتصريحه أو تحديده. هذا مفيد لك في حال أردت ضبط أحد المكوّنات وتغييرها على حسب حجم (أبعاد) المتصفّح. في المثال أعلاه سيتم إغلاق النافذة أو القائمة المنسدلة إذا تجاوزت أبعاد المتصفح 768 بكسل، خلاف ذلك نُبقيه على حالته.
|
|
|
|
|
|
|
+إضافة <span dir="ltr">`.window`</span> إلى مستمع الأحداث، سيقوم بتثبيت المتصنّت للأحداث على نافذة المتصفّح كله `window` بدلاً من DOM الذي قمت بتصريحه أو تحديده. هذا مفيد لك في حال أردت ضبط أحد المكوّنات وتغييرها على حسب حجم (أبعاد) المتصفّح. في المثال أعلاه سيتم إغلاق النافذة أو القائمة المنسدلة إذا تجاوزت أبعاد المتصفح 768 بكسل، خلاف ذلك نُبقيه على حالته.
|
|
|
|
|
|
|
|
->ملاحظة: يمكنك أيضًا استخدام معدّل `.document` لإرفاق المتصنّت بدلا من `window`.
|
|
|
|
|
|
|
+>ملاحظة: يمكنك أيضًا استخدام معدّل <span dir="ltr">`.document`</span> لإرفاق المتصنّت بدلا من `window`.
|
|
|
|
|
|
|
|
-**المُعدّل `.once`**
|
|
|
|
|
-**المثال:** `<button x-on:mouseenter.once="fetchSomething()"></button>`
|
|
|
|
|
|
|
+**المُعدّل <span dir="ltr">`.once`</span>**
|
|
|
|
|
+**المثال:** <span dir="ltr">`<button x-on:mouseenter.once="fetchSomething()"></button>`</span>
|
|
|
|
|
|
|
|
-تعني إضافة المعدّل `.once` إلى المتصنّت للحدث أن المنصت (listener) يعمل مرة واحدة فقط. هذا مفيد للمهام التي تريد القيام بها مرة واحدة فقط، مثل الجلب الجزئي لشفرات HTML أو ما شابه.
|
|
|
|
|
|
|
+تعني إضافة المعدّل <span dir="ltr">`.once`</span> إلى المتصنّت للحدث أن المنصت (listener) يعمل مرة واحدة فقط. هذا مفيد للمهام التي تريد القيام بها مرة واحدة فقط، مثل الجلب الجزئي لشفرات HTML أو ما شابه.
|
|
|
|
|
|
|
|
-**المُعدّل `.passive` **
|
|
|
|
|
-**المثال:** `<button x-on:mousedown.passive="interactive = true"></button>`
|
|
|
|
|
|
|
+**المُعدّل <span dir="ltr">`.passive`</span>**
|
|
|
|
|
+**المثال:** <span dir="ltr">`<button x-on:mousedown.passive="interactive = true"></button>`</span>
|
|
|
|
|
|
|
|
-إذا أضفنا `.passive` إلى المتصنّت للحدث، فإن هذا الرمز المميز سيعطل وظيفة `preventDefault()` ولن تعمل على أي حدث يتم تنفيذه. يمكن أن يساعدك أحياناً في تحسين أداء التمرير (scroll) على الأجهزة التي تعمل باللمس.
|
|
|
|
|
|
|
+إذا أضفنا <span dir="ltr">`.passive`</span> إلى المتصنّت للحدث، فإن هذا الرمز المميز سيعطل وظيفة <span dir="ltr">`preventDefault()`</span> ولن تعمل على أي حدث يتم تنفيذه. يمكن أن يساعدك أحياناً في تحسين أداء التمرير (scroll) على الأجهزة التي تعمل باللمس.
|
|
|
|
|
|
|
|
-**المُعدّل `.debounce`**
|
|
|
|
|
-**المثال:** `<input x-on:input.debounce="fetchSomething()">`
|
|
|
|
|
|
|
+**المُعدّل <span dir="ltr">`.debounce`</span>**
|
|
|
|
|
+**المثال:** <span dir="ltr">`<input x-on:input.debounce="fetchSomething()">`</span>
|
|
|
|
|
|
|
|
-يتيح لك تحديد `.debounce` وقت تنفيذ الأحداث، لن يعمل معالج الأحداث (event handler) فقط إذا مرت فترة زمنية معينة منذ آخر حدث، عندما يكون المعالج جاهزاً للتنفيذ سيتم تنفيذ آخر استدعاء للمعالج.
|
|
|
|
|
|
|
+يتيح لك تحديد <span dir="ltr">`.debounce`</span> وقت تنفيذ الأحداث، لن يعمل معالج الأحداث (event handler) فقط إذا مرت فترة زمنية معينة منذ آخر حدث، عندما يكون المعالج جاهزاً للتنفيذ سيتم تنفيذ آخر استدعاء للمعالج.
|
|
|
|
|
|
|
|
مهلة الإنتظار "wait" الإفتراضية هي 250 مللي ثانية.
|
|
مهلة الإنتظار "wait" الإفتراضية هي 250 مللي ثانية.
|
|
|
|
|
|
|
|
إذا أردت تخصيص مهلة الإنتظار يمكنك استخدام الطريقة التالية:
|
|
إذا أردت تخصيص مهلة الإنتظار يمكنك استخدام الطريقة التالية:
|
|
|
|
|
|
|
|
-```
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
<input x-on:input.debounce.750="fetchSomething()">
|
|
<input x-on:input.debounce.750="fetchSomething()">
|
|
|
<input x-on:input.debounce.750ms="fetchSomething()">
|
|
<input x-on:input.debounce.750ms="fetchSomething()">
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-**المُعدّل `.camel`**
|
|
|
|
|
-**المثال:** `<input x-on:event-name.camel="doSomething()">`
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+**المُعدّل <span dir="ltr">`.camel`</span>**
|
|
|
|
|
+**المثال:** <span dir="ltr">`<input x-on:event-name.camel="doSomething()">`</span>
|
|
|
|
|
|
|
|
يقوم المتصنّت للأحداث بالإنصات إلى الأحداث التي تحمل حالة أحرف بصيغة camelCase. في هذا المثال سيتم تنفيذها للعناصر التي تحمل اسم `eventName`.
|
|
يقوم المتصنّت للأحداث بالإنصات إلى الأحداث التي تحمل حالة أحرف بصيغة camelCase. في هذا المثال سيتم تنفيذها للعناصر التي تحمل اسم `eventName`.
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
### `x-model`
|
|
### `x-model`
|
|
|
-**المثال:** `<input type="text" x-model="foo">`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<input type="text" x-model="foo">`</span>
|
|
|
|
|
|
|
|
-**البُنية:** `<input type="text" x-model="[data item]">`
|
|
|
|
|
|
|
+**البُنية:** <span dir="ltr">`<input type="text" x-model="[data item]">`</span>
|
|
|
|
|
|
|
|
يضيف `x-model` ربط بيانات ثنائي الإتجاه "two-way data binding" (أي أن ربط البيانات يكون في كلا الطرفين). بمعنى آخر، أن قيمة العنصر تتم مزامنتها مع قيمة بيانات عنصر للمكوّن.
|
|
يضيف `x-model` ربط بيانات ثنائي الإتجاه "two-way data binding" (أي أن ربط البيانات يكون في كلا الطرفين). بمعنى آخر، أن قيمة العنصر تتم مزامنتها مع قيمة بيانات عنصر للمكوّن.
|
|
|
|
|
|
|
|
> يكتشف `x-model` تلقائياً التغييرات التي تطرأ على العناصر التالية: text inputs ،checkboxes ،radio buttons ،textareas ،selects ،multiple selects.
|
|
> يكتشف `x-model` تلقائياً التغييرات التي تطرأ على العناصر التالية: text inputs ،checkboxes ،radio buttons ،textareas ،selects ،multiple selects.
|
|
|
> يمكنك فهم كيف يعمل ذلك في الخفاء في "سيناريوهات" إطار عمل [how Vue would](https://vuejs.org/v2/guide/forms.html).
|
|
> يمكنك فهم كيف يعمل ذلك في الخفاء في "سيناريوهات" إطار عمل [how Vue would](https://vuejs.org/v2/guide/forms.html).
|
|
|
|
|
|
|
|
-**المُعدّل `.number`**
|
|
|
|
|
-**المثال:** `<input x-model.number="age">`
|
|
|
|
|
|
|
+**المُعدّل <span dir="ltr">`.number`</span>**
|
|
|
|
|
+**المثال:** <span dir="ltr">`<input x-model.number="age">`</span>
|
|
|
|
|
|
|
|
-يقوم `.number` بتحويل القيمة المدخلة عبر `<input>` إلى رقم. في حال تعذّر تحليل القيمة المدخلة أنه رقم فعلاً سيُرجع القيمة الأصلية المدخلة.
|
|
|
|
|
|
|
+يقوم <span dir="ltr">`.number`</span> بتحويل القيمة المدخلة عبر `<input>` إلى رقم. في حال تعذّر تحليل القيمة المدخلة أنه رقم فعلاً سيُرجع القيمة الأصلية المدخلة.
|
|
|
|
|
|
|
|
-**المُعدّل `.debounce`**
|
|
|
|
|
-**المثال:** `<input x-model.debounce="search">`
|
|
|
|
|
|
|
+**المُعدّل <span dir="ltr">`.debounce`</span>**
|
|
|
|
|
+**المثال:** <span dir="ltr">`<input x-model.debounce="search">`</span>
|
|
|
|
|
|
|
|
-يتيح لك تحديد `.debounce` وقت تنفيذ الأحداث، لن يعمل معالج الأحداث (event handler) فقط إذا مرت فترة زمنية معينة منذ آخر حدث، عندما يكون المعالج جاهزاً للتنفيذ سيتم تنفيذ آخر استدعاء للمعالج.
|
|
|
|
|
|
|
+يتيح لك تحديد <span dir="ltr">`.debounce`</span> وقت تنفيذ الأحداث، لن يعمل معالج الأحداث (event handler) فقط إذا مرت فترة زمنية معينة منذ آخر حدث، عندما يكون المعالج جاهزاً للتنفيذ سيتم تنفيذ آخر استدعاء للمعالج.
|
|
|
|
|
|
|
|
مهلة الإنتظار "wait" الإفتراضية هي 250 مللي ثانية.
|
|
مهلة الإنتظار "wait" الإفتراضية هي 250 مللي ثانية.
|
|
|
|
|
|
|
|
إذا أردت تخصيص مهلة الإنتظار يمكنك استخدام الطريقة التالية:
|
|
إذا أردت تخصيص مهلة الإنتظار يمكنك استخدام الطريقة التالية:
|
|
|
|
|
|
|
|
-```
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
<input x-model.debounce.750="search">
|
|
<input x-model.debounce.750="search">
|
|
|
<input x-model.debounce.750ms="search">
|
|
<input x-model.debounce.750ms="search">
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
### `x-text`
|
|
### `x-text`
|
|
|
-**المثال:** `<span x-text="foo"></span>`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<span x-text="foo"></span>`</span>
|
|
|
|
|
|
|
|
-**البُنية:** `<span x-text="[expression]"`
|
|
|
|
|
|
|
+**البُنية:** <span dir="ltr">`<span x-text="[expression]"`</span>
|
|
|
|
|
|
|
|
يعمل بشكل مشابه لـ `x-bind`، ولكنه يقوم بتحديث النص المضمن `innerText` داخل العنصر.
|
|
يعمل بشكل مشابه لـ `x-bind`، ولكنه يقوم بتحديث النص المضمن `innerText` داخل العنصر.
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
### `x-html`
|
|
### `x-html`
|
|
|
-**المثال:** `<span x-html="foo"></span>`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<span x-html="foo"></span>`</span>
|
|
|
|
|
|
|
|
-**البُنية:** `<span x-html="[expression]"`
|
|
|
|
|
|
|
+**البُنية:** <span dir="ltr">`<span x-html="[expression]"`</span>
|
|
|
|
|
|
|
|
يعمل بشكل مشابه لـ `x-bind`، ولكنه يقوم بتحديث شفرة HTML المضمنة `innerText` داخل العنصر.
|
|
يعمل بشكل مشابه لـ `x-bind`، ولكنه يقوم بتحديث شفرة HTML المضمنة `innerText` داخل العنصر.
|
|
|
|
|
|
|
@@ -459,22 +537,22 @@ import 'alpinejs'
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
### `x-ref`
|
|
### `x-ref`
|
|
|
-**المثال:** `<div x-ref="foo"></div><button x-on:click="$refs.foo.innerText = 'bar'"></button>`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<div x-ref="foo"></div><button x-on:click="$refs.foo.innerText = 'bar'"></button>`</span>
|
|
|
|
|
|
|
|
-**البُنية:** `<div x-ref="[ref name]"></div><button x-on:click="$refs.[ref name].innerText = 'bar'"></button>`
|
|
|
|
|
|
|
+**البُنية:** <span dir="ltr">`<div x-ref="[ref name]"></div><button x-on:click="$refs.[ref name].innerText = 'bar'"></button>`</span>
|
|
|
|
|
|
|
|
توفر `x-ref` طريقة مفيدة لجلب عناصر DOM خارج المكون الخاص بك، عندما تقوم بتعيين `x-ref` للعنصر، سيكون متاحاً لجميع معالجات الأحداث داخل الكائن عن طريق استدعاء `$refs`.
|
|
توفر `x-ref` طريقة مفيدة لجلب عناصر DOM خارج المكون الخاص بك، عندما تقوم بتعيين `x-ref` للعنصر، سيكون متاحاً لجميع معالجات الأحداث داخل الكائن عن طريق استدعاء `$refs`.
|
|
|
|
|
|
|
|
بديل مفيد في حال كان يجب استخدام الأمر `document.querySelector` في كثير من الأحيان للإشارة إلى العناصر.
|
|
بديل مفيد في حال كان يجب استخدام الأمر `document.querySelector` في كثير من الأحيان للإشارة إلى العناصر.
|
|
|
|
|
|
|
|
-> يمكنك أيضا عمل ربط القيم المتغيّرة (الديناميكية) بـ `<span :x-ref="item.id"></span>` .
|
|
|
|
|
|
|
+> يمكنك أيضا عمل ربط القيم المتغيّرة (الديناميكية) بـ <span dir="ltr">`<span :x-ref="item.id"></span>`</span>.
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
### `x-if`
|
|
### `x-if`
|
|
|
-**المثال:** `<template x-if="true"><div>Some Element</div></template>`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<template x-if="true"><div>Some Element</div></template>`</span>
|
|
|
|
|
|
|
|
-**البُنية:** `<template x-if="[expression]"><div>Some Element</div></template>`
|
|
|
|
|
|
|
+**البُنية:** <span dir="ltr">`<template x-if="[expression]"><div>Some Element</div></template>`</span>
|
|
|
|
|
|
|
|
إذا كانت وظيفة `x-show` (كما شرحناها سابقاً) غير كافية، فيمكن استخدام `x-if` بدلاً من ذلك لإزالة عنصر بالكامل من DOM.
|
|
إذا كانت وظيفة `x-show` (كما شرحناها سابقاً) غير كافية، فيمكن استخدام `x-if` بدلاً من ذلك لإزالة عنصر بالكامل من DOM.
|
|
|
|
|
|
|
@@ -489,12 +567,17 @@ import 'alpinejs'
|
|
|
### `x-for`
|
|
### `x-for`
|
|
|
**المثال:**
|
|
**المثال:**
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<template x-for="item in items" :key="item">
|
|
<template x-for="item in items" :key="item">
|
|
|
<div x-text="item"></div>
|
|
<div x-text="item"></div>
|
|
|
</template>
|
|
</template>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
> ملاحظة: هذا `:key` مفتاح اختياري ، ومع ذلك، نوصى به وبشدة.
|
|
> ملاحظة: هذا `:key` مفتاح اختياري ، ومع ذلك، نوصى به وبشدة.
|
|
|
|
|
|
|
|
يُعدّ `x-for` مناسباً للحالات التي يلزم فيها انشاء عقدة DOM جديدة لكل عنصر داخل المصفوفة. مشابه لـ `v-for` في Vue، ولكن الإختلاف الوحيد هو أنه يجب وضعه في وسم `template` بدلاً من عنصر DOM عادي.
|
|
يُعدّ `x-for` مناسباً للحالات التي يلزم فيها انشاء عقدة DOM جديدة لكل عنصر داخل المصفوفة. مشابه لـ `v-for` في Vue، ولكن الإختلاف الوحيد هو أنه يجب وضعه في وسم `template` بدلاً من عنصر DOM عادي.
|
|
@@ -510,6 +593,8 @@ import 'alpinejs'
|
|
|
|
|
|
|
|
إذا كنت ترغب في الوصول إلى تكرار مصفوفة كائن (array object)، فاستخدم الصيغة التالية:
|
|
إذا كنت ترغب في الوصول إلى تكرار مصفوفة كائن (array object)، فاستخدم الصيغة التالية:
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<template x-for="(item, index, collection) in items" :key="index">
|
|
<template x-for="(item, index, collection) in items" :key="index">
|
|
|
<!-- يمكنك أيضًا الرجوع إلى "collection" في التكرار متى احتجت إلى ذلك. -->
|
|
<!-- يمكنك أيضًا الرجوع إلى "collection" في التكرار متى احتجت إلى ذلك. -->
|
|
@@ -522,6 +607,8 @@ import 'alpinejs'
|
|
|
</template>
|
|
</template>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
> ملاحظة: عند استخدام `x-for`، يجب أن يكون هناك عنصر جذر واحد (element root) على الأقل داخل `template`.
|
|
> ملاحظة: عند استخدام `x-for`، يجب أن يكون هناك عنصر جذر واحد (element root) على الأقل داخل `template`.
|
|
|
|
|
|
|
|
> ملاحظة: عند استخدام template في svg، ستحتاج إلى إضافة [polyfill](https://github.com/alpinejs/alpine/issues/637#issuecomment-654856538) الذي يجب تنفيذه قبل تهيئة Alpine.js.
|
|
> ملاحظة: عند استخدام template في svg، ستحتاج إلى إضافة [polyfill](https://github.com/alpinejs/alpine/issues/637#issuecomment-654856538) الذي يجب تنفيذه قبل تهيئة Alpine.js.
|
|
@@ -529,6 +616,8 @@ import 'alpinejs'
|
|
|
#### تداخل `x-for`
|
|
#### تداخل `x-for`
|
|
|
يمكنك عمل حلقات تكرار داخل حلقات x-for ولكن يجب أن نلّف (wrap) كل دورة في عنصر. مثلا:
|
|
يمكنك عمل حلقات تكرار داخل حلقات x-for ولكن يجب أن نلّف (wrap) كل دورة في عنصر. مثلا:
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<template x-for="item in items">
|
|
<template x-for="item in items">
|
|
|
<div>
|
|
<div>
|
|
@@ -539,21 +628,30 @@ import 'alpinejs'
|
|
|
</template>
|
|
</template>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
#### التكرار داخل مجال:
|
|
#### التكرار داخل مجال:
|
|
|
|
|
|
|
|
يدعم Alpine صيغة `i in n`، حيث يمثّل n عدداً صحيحاً مما يسمح لك بعمل تكرار على مجال معين من العناصر.
|
|
يدعم Alpine صيغة `i in n`، حيث يمثّل n عدداً صحيحاً مما يسمح لك بعمل تكرار على مجال معين من العناصر.
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<template x-for="i in 10">
|
|
<template x-for="i in 10">
|
|
|
<span x-text="i"></span>
|
|
<span x-text="i"></span>
|
|
|
</template>
|
|
</template>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
### `x-transition`
|
|
### `x-transition`
|
|
|
**المثال:**
|
|
**المثال:**
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div
|
|
<div
|
|
|
x-show="open"
|
|
x-show="open"
|
|
@@ -566,6 +664,9 @@ import 'alpinejs'
|
|
|
>...</div>
|
|
>...</div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<template x-if="open">
|
|
<template x-if="open">
|
|
|
<div
|
|
<div
|
|
@@ -579,26 +680,30 @@ import 'alpinejs'
|
|
|
</template>
|
|
</template>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
> المثال أعلاه يستخدم تنسيقات [Tailwind CSS](https://tailwindcss.com/)
|
|
> المثال أعلاه يستخدم تنسيقات [Tailwind CSS](https://tailwindcss.com/)
|
|
|
|
|
|
|
|
-يوفر Alpine ستة تأثيرات إنتقالية مختلفة لتطبيق الفئات (Classes) على مراحل مختلفة من انتقال العنصر، بين الحالات "hidden" و "shown". تعمل هذه التوجيهات مع كل من x-show و x-if.
|
|
|
|
|
|
|
+يوفر Alpine ستة تأثيرات إنتقالية مختلفة لتطبيق الفئات (Classes) على مراحل مختلفة من انتقال العنصر، بين الحالات "hidden" و "shown". تعمل هذه التوجيهات مع كل من `x-show` و `x-if`.
|
|
|
|
|
|
|
|
تعمل هذه تمامًا مثل توجيهات التأثير بـ VueJS، باستثناء أن لها أسماء مختلفة وأكثر منطقية:
|
|
تعمل هذه تمامًا مثل توجيهات التأثير بـ VueJS، باستثناء أن لها أسماء مختلفة وأكثر منطقية:
|
|
|
|
|
|
|
|
| التوجيه | الوصف |
|
|
| التوجيه | الوصف |
|
|
|
| ---: | ---: |
|
|
| ---: | ---: |
|
|
|
-| `:enter` | يتم تطبيقه طوال مرحلة الدخول. |
|
|
|
|
|
-| `:enter-start` | تتم إضافته قبل إدراج العنصر وإزالة الإطار (frame) بعد إدراج العنصر. |
|
|
|
|
|
-| `:enter-end` | تمت إضافة إطار (frame) واحد بعد إدراج العنصر (في نفس الوقت تتم إزالة `enter-start`) ، تتم إزالته عند انتهاء التأثير/التحريك. |
|
|
|
|
|
-| `:leave` | تُطبق طوال مرحلة الخروج. |
|
|
|
|
|
-| `:leave-start` | يُضاف مباشرة عند بدء انتهاء التأثير، وإزالته بعد إطار واحد. |
|
|
|
|
|
-| `:leave-end` | تمت إضافة إطار بعد تشغيل "انتهاء التأثير" (في نفس الوقت الذي تتم فيه إزالة `leave-start`) ، وتتم إزالته عند انتهاء التأثير/التحريك. |
|
|
|
|
|
|
|
+| <span dir="ltr">`:enter`</span> | يتم تطبيقه طوال مرحلة الدخول. |
|
|
|
|
|
+| <span dir="ltr">`:enter-start`</span> | تتم إضافته قبل إدراج العنصر وإزالة الإطار (frame) بعد إدراج العنصر. |
|
|
|
|
|
+| <span dir="ltr">`:enter-end`</span> | تمت إضافة إطار (frame) واحد بعد إدراج العنصر (في نفس الوقت تتم إزالة `enter-start`) ، تتم إزالته عند انتهاء التأثير/التحريك. |
|
|
|
|
|
+| <span dir="ltr">`:leave`</span> | تُطبق طوال مرحلة الخروج. |
|
|
|
|
|
+| <span dir="ltr">`:leave-start`</span> | يُضاف مباشرة عند بدء انتهاء التأثير، وإزالته بعد إطار واحد. |
|
|
|
|
|
+| <span dir="ltr">`:leave-end`</span> | تمت إضافة إطار بعد تشغيل "انتهاء التأثير" (في نفس الوقت الذي تتم فيه إزالة `leave-start`) ، وتتم إزالته عند انتهاء التأثير/التحريك. |
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
### `x-spread`
|
|
### `x-spread`
|
|
|
**المثال:**
|
|
**المثال:**
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-data="dropdown()">
|
|
<div x-data="dropdown()">
|
|
|
<button x-spread="trigger">فتح القائمة المنسدلة</button>
|
|
<button x-spread="trigger">فتح القائمة المنسدلة</button>
|
|
@@ -628,64 +733,86 @@ import 'alpinejs'
|
|
|
</script>
|
|
</script>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
يتيح `x-spread` نقل ربط الكائنات التي تحتوي على توجيهات Alpine لعنصر ما، إلى كائن يمكن إعادة استخدامه.
|
|
يتيح `x-spread` نقل ربط الكائنات التي تحتوي على توجيهات Alpine لعنصر ما، إلى كائن يمكن إعادة استخدامه.
|
|
|
|
|
|
|
|
مفاتيح الكائن (object keys) عبارة عن توجيهات (يمكن أن يكون أي توجيهات بما في ذلك المُعدّلات) والقيم عبرة عن عمليات callback يتم تنفيذ قيمها بواسطة Alpine.
|
|
مفاتيح الكائن (object keys) عبارة عن توجيهات (يمكن أن يكون أي توجيهات بما في ذلك المُعدّلات) والقيم عبرة عن عمليات callback يتم تنفيذ قيمها بواسطة Alpine.
|
|
|
|
|
|
|
|
> ملاحظة: هناك بعض الأشياء التي يجب مراعاتها في `x-spread`:
|
|
> ملاحظة: هناك بعض الأشياء التي يجب مراعاتها في `x-spread`:
|
|
|
-> - الحالة الخاصة الوحيدة لـ spread هي استخدامه مع `x-for`. عند تطبيقه على التوجيه `x-for`، يجب إرجاع تعليمات نصيّة (string) عادية بواسطة callback. كمثال `['x-for']() { return 'item in items' }`
|
|
|
|
|
|
|
+> - الحالة الخاصة الوحيدة لـ spread هي استخدامه مع `x-for`. عند تطبيقه على التوجيه `x-for`، يجب إرجاع تعليمات نصيّة (string) عادية بواسطة callback. كمثال <span dir="ltr">`['x-for']() { return 'item in items' }`</span>
|
|
|
> - `x-data` و `x-init` لا يمكن إستخدامهما داخل كائن "spread".
|
|
> - `x-data` و `x-init` لا يمكن إستخدامهما داخل كائن "spread".
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
### `x-cloak`
|
|
### `x-cloak`
|
|
|
-**المثال:** `<div x-data="{}" x-cloak></div>`
|
|
|
|
|
|
|
+**المثال:** <span dir="ltr">`<div x-data="{}" x-cloak></div>`</span>
|
|
|
|
|
|
|
|
تتم إزالة سمة `x-cloak` من العنصر أثناء تهيئة Alpine. يساعد هذا في إخفاء DOM المهيأ مسبقاً. لكي يعمل هذا عليك بإضافة التعليمات التالية:
|
|
تتم إزالة سمة `x-cloak` من العنصر أثناء تهيئة Alpine. يساعد هذا في إخفاء DOM المهيأ مسبقاً. لكي يعمل هذا عليك بإضافة التعليمات التالية:
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<style>
|
|
<style>
|
|
|
[x-cloak] { display: none; }
|
|
[x-cloak] { display: none; }
|
|
|
</style>
|
|
</style>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
### الخصائص السحرية
|
|
### الخصائص السحرية
|
|
|
|
|
|
|
|
-> باستثناء $el، **لا يمكن استخدام الخصائص السحرية ضمن x-data** في حال المكوّن لم تتم تهيئته بعد.
|
|
|
|
|
|
|
+> باستثناء <span dir="ltr">`$el`</span>، **لا يمكن استخدام الخصائص السحرية ضمن x-data** في حال المكوّن لم تتم تهيئته بعد.
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
-### `$el`
|
|
|
|
|
|
|
+### <span dir="ltr">`$el`</span>
|
|
|
**المثال:**
|
|
**المثال:**
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-data>
|
|
<div x-data>
|
|
|
<button @click="$el.innerHTML = 'foo'">استبدلني بـ "foo"</button>
|
|
<button @click="$el.innerHTML = 'foo'">استبدلني بـ "foo"</button>
|
|
|
</div>
|
|
</div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-`$el` خاصية سحرية للوصول إلى فرع DOM الأساسي.
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
|
|
|
-### `$refs`
|
|
|
|
|
|
|
+<span dir="ltr">`$el`</span> خاصية سحرية للوصول إلى فرع DOM الأساسي.
|
|
|
|
|
+
|
|
|
|
|
+### <span dir="ltr">`$refs`</span>
|
|
|
**المثال:**
|
|
**المثال:**
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<span x-ref="foo"></span>
|
|
<span x-ref="foo"></span>
|
|
|
|
|
|
|
|
<button x-on:click="$refs.foo.innerText = 'bar'"></button>
|
|
<button x-on:click="$refs.foo.innerText = 'bar'"></button>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
يسترجع عناصر DOM المميّزة بـ `x-ref` داخل المكوّن، مفيدًا عندما تحتاج عناصر DOM إلى التعديل يدويًا.
|
|
يسترجع عناصر DOM المميّزة بـ `x-ref` داخل المكوّن، مفيدًا عندما تحتاج عناصر DOM إلى التعديل يدويًا.
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
-### `$event`
|
|
|
|
|
|
|
+### <span dir="ltr">`$event`</span>
|
|
|
**المثال:**
|
|
**المثال:**
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<input x-on:input="alert($event.target.value)">
|
|
<input x-on:input="alert($event.target.value)">
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
يرجع كائن الحدث "Event" الأصلي داخل المُتنصت لأحداث المستخدم.
|
|
يرجع كائن الحدث "Event" الأصلي داخل المُتنصت لأحداث المستخدم.
|
|
|
|
|
|
|
|
> ملاحظة: خاصية $event متاحة فقط في تعليمات DOM.
|
|
> ملاحظة: خاصية $event متاحة فقط في تعليمات DOM.
|
|
@@ -696,9 +823,11 @@ import 'alpinejs'
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
-### `$dispatch`
|
|
|
|
|
|
|
+### <span dir="ltr">`$dispatch`</span>
|
|
|
**المثال:**
|
|
**المثال:**
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div @custom-event="console.log($event.detail.foo)">
|
|
<div @custom-event="console.log($event.detail.foo)">
|
|
|
<button @click="$dispatch('custom-event', { foo: 'bar' })">
|
|
<button @click="$dispatch('custom-event', { foo: 'bar' })">
|
|
@@ -706,7 +835,12 @@ import 'alpinejs'
|
|
|
</div>
|
|
</div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-`$dispatch`هي طريقة مختصرة لإنشاء أحداث مخصصة `CustomEvent` وإرسالها داخلياً باستخدام `.dispatchEvent()` هناك العديد من حالات الاستخدام التي يكون فيها إرسال البيانات بين المكونات من خلال أحداث يحددها المستخدم خيارًا جيداً. هنا يمكنك العثور على [مزيد من المعلومات](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) حول نظام CustomEvent الأساسي في المتصفحات.
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+<span dir="ltr">`$dispatch`</span> هي طريقة مختصرة لإنشاء أحداث مخصصة `CustomEvent` وإرسالها داخلياً باستخدام <span dir="ltr">`.dispatchEvent()`</span> هناك العديد من حالات الاستخدام التي يكون فيها إرسال البيانات بين المكونات من خلال أحداث يحددها المستخدم خيارًا جيداً. هنا يمكنك العثور على [مزيد من المعلومات](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) حول نظام CustomEvent الأساسي في المتصفحات.
|
|
|
|
|
+
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
<div x-data="{ foo: 'bar' }">
|
|
<div x-data="{ foo: 'bar' }">
|
|
@@ -717,12 +851,17 @@ import 'alpinejs'
|
|
|
</div>
|
|
</div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
**ملاحظة حول انتشار الحدث** (**Event Propagation**)
|
|
**ملاحظة حول انتشار الحدث** (**Event Propagation**)
|
|
|
|
|
|
|
|
-إذا كنت ترغب في توقيف الأحداث التي يتم تشغيلها بواسطة عقد HTML داخل نفس التسلسل الهرمي المتداخل (يعني `div` داخل `div` وهكذا)، فيجب عليك استخدام المُعدِّل `.window`.
|
|
|
|
|
|
|
+إذا كنت ترغب في توقيف الأحداث التي يتم تشغيلها بواسطة عقد HTML داخل نفس التسلسل الهرمي المتداخل (يعني `div` داخل `div` وهكذا)، فيجب عليك استخدام المُعدِّل <span dir="ltr">`.window`</span>.
|
|
|
|
|
|
|
|
مثال:
|
|
مثال:
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-data>
|
|
<div x-data>
|
|
|
<span @custom-event="console.log($event.detail.foo)"></span>
|
|
<span @custom-event="console.log($event.detail.foo)"></span>
|
|
@@ -730,6 +869,9 @@ import 'alpinejs'
|
|
|
<div>
|
|
<div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
> ملاحظة: المثال أعلاه لن يعمل بشكل جيّد. لأنه إذا تم تشغيل الحدث المخصص، فسيتم انتشاره "تشغيله" في العناصر الرئيسية المشتركة بـ div.
|
|
> ملاحظة: المثال أعلاه لن يعمل بشكل جيّد. لأنه إذا تم تشغيل الحدث المخصص، فسيتم انتشاره "تشغيله" في العناصر الرئيسية المشتركة بـ div.
|
|
|
|
|
|
|
|
**Dispatching to Components**
|
|
**Dispatching to Components**
|
|
@@ -738,6 +880,8 @@ import 'alpinejs'
|
|
|
|
|
|
|
|
**مثال:**
|
|
**مثال:**
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-data @custom-event.window="console.log($event.detail)"></div>
|
|
<div x-data @custom-event.window="console.log($event.detail)"></div>
|
|
|
|
|
|
|
@@ -745,7 +889,12 @@ import 'alpinejs'
|
|
|
<!--عندما تنقر سيطبع console.log "Hello World!". -->
|
|
<!--عندما تنقر سيطبع console.log "Hello World!". -->
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-يمكنك أيضا استخدام `$dispatch()` لبدء تحديث البيانات من روابط `x-model`. على سبيل المثال:
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+يمكنك أيضا استخدام <span dir="ltr">`$dispatch()`</span> لبدء تحديث البيانات من روابط `x-model`. على سبيل المثال:
|
|
|
|
|
+
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
<div x-data="{ foo: 'bar' }">
|
|
<div x-data="{ foo: 'bar' }">
|
|
@@ -755,17 +904,22 @@ import 'alpinejs'
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
|
```
|
|
```
|
|
|
-> ملاحظ: خاصية $dispatch متاحة فقط ضمن تعليمات DOM.
|
|
|
|
|
|
|
|
|
|
-إذا أردت تمرير $dispatch داخل دوال الجافاسكربت فيمكنك تمريرها مباشرة.
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+> ملاحظ: خاصية <span dir="ltr">`$dispatch`</span> متاحة فقط ضمن تعليمات DOM.
|
|
|
|
|
|
|
|
-`<button x-on:click="myFunction($dispatch)"></button>`
|
|
|
|
|
|
|
+إذا أردت تمرير <span dir="ltr">`$dispatch`</span> داخل دوال الجافاسكربت فيمكنك تمريرها مباشرة.
|
|
|
|
|
+
|
|
|
|
|
+<span dir="ltr">`<button x-on:click="myFunction($dispatch)"></button>`</span>
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
-### `$nextTick`
|
|
|
|
|
|
|
+### <span dir="ltr">`$nextTick`</span>
|
|
|
**المثال:**
|
|
**المثال:**
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-data="{ fruit: 'apple' }">
|
|
<div x-data="{ fruit: 'apple' }">
|
|
|
<button
|
|
<button
|
|
@@ -778,32 +932,42 @@ import 'alpinejs'
|
|
|
</div>
|
|
</div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-`$nextTick` هي خاصية تعني أن التعليمات لا يتم تنفيذها إلا بعد أن يقوم Alpine بتنفيذ تحديثات DOM التفاعلية. هذا مفيد إذا كنت لا تريد التفاعل مع DOM حتى يتم إجراء جميع تحديثات للبيانات.
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+<span dir="ltr">`$nextTick`</span> هي خاصية تعني أن التعليمات لا يتم تنفيذها إلا بعد أن يقوم Alpine بتنفيذ تحديثات DOM التفاعلية. هذا مفيد إذا كنت لا تريد التفاعل مع DOM حتى يتم إجراء جميع تحديثات للبيانات.
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
-### `$watch`
|
|
|
|
|
|
|
+### <span dir="ltr">`$watch`</span>
|
|
|
**المثال:**
|
|
**المثال:**
|
|
|
|
|
|
|
|
|
|
+<div dir="ltr">
|
|
|
|
|
+
|
|
|
```html
|
|
```html
|
|
|
<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
|
|
<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
|
|
|
<button @click="open = ! open">Toggle Open</button>
|
|
<button @click="open = ! open">Toggle Open</button>
|
|
|
</div>
|
|
</div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-تمكّنك `$watch` في المثال أعلاه أنه عند الضغط فوق الزر "button" ويتم تفعليه `open`، يقوم callback بتنفيذ `console.log` وطباعة القيمة الجديدة.
|
|
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+تمكّنك <span dir="ltr">`$watch`</span> في المثال أعلاه أنه عند الضغط فوق الزر "button" ويتم تفعليه `open`، يقوم callback بتنفيذ `console.log` وطباعة القيمة الجديدة.
|
|
|
|
|
|
|
|
## الحماية
|
|
## الحماية
|
|
|
إذا وجدت ثغرة أمنية، يُرجى إرسال بريد إلكتروني إلى: [calebporzio@gmail.com]().
|
|
إذا وجدت ثغرة أمنية، يُرجى إرسال بريد إلكتروني إلى: [calebporzio@gmail.com]().
|
|
|
|
|
|
|
|
-يعتمد Alpine على `function` لتنفيذ خصائصه. على الرغم من كونها أنها أكثرَ أماناً من `eval()` إلا أن هذه الممارسة مازالت محظورة في بعض البيئات المقيّدة مثل Google Chrome App باستخدام سياسة أمان المحتوى المقيد ([CSP](https://csp.withgoogle.com/docs/strict-csp.html)).
|
|
|
|
|
|
|
+يعتمد Alpine على `function` لتنفيذ خصائصه. على الرغم من كونها أنها أكثرَ أماناً من <span dir="ltr">`eval()`</span> إلا أن هذه الممارسة مازالت محظورة في بعض البيئات المقيّدة مثل Google Chrome App باستخدام سياسة أمان المحتوى المقيد ([CSP](https://csp.withgoogle.com/docs/strict-csp.html)).
|
|
|
|
|
|
|
|
إذا كنت تستخدم Alpine في بيئة بها بيانات حساسة وتحتاج إلى [CSP](https://csp.withgoogle.com/docs/strict-csp.html)، فأنت بحاجة إلى تضمين التقييم غير الآمن `unsafe-eval` في سياستك. يساعد في وضع سياسات قوية على حماية المستخدمين عند استخدام المعلومات الشخصية والمالية.
|
|
إذا كنت تستخدم Alpine في بيئة بها بيانات حساسة وتحتاج إلى [CSP](https://csp.withgoogle.com/docs/strict-csp.html)، فأنت بحاجة إلى تضمين التقييم غير الآمن `unsafe-eval` في سياستك. يساعد في وضع سياسات قوية على حماية المستخدمين عند استخدام المعلومات الشخصية والمالية.
|
|
|
|
|
|
|
|
-نظرًا لأن السياسة تنطبق على جميع البرامج النصية في صفحتك، فمن المهم أن تتم مراجعة المكتبات الخارجية الأخرى المضمنة في موقعك بعناية للتأكد من أنها جديرة لإستعمالها وآمنة ولن تقدم أي ثغرة أمنية XSS أو (Cross Site Scripting vulnerability) عبر الموقع سواء باستخدام وظيفة `eval()` أو التلاعب بـ DOM لإدخال تعليمات برمجية ضارة في صفحتك.
|
|
|
|
|
|
|
+نظرًا لأن السياسة تنطبق على جميع البرامج النصية في صفحتك، فمن المهم أن تتم مراجعة المكتبات الخارجية الأخرى المضمنة في موقعك بعناية للتأكد من أنها جديرة لإستعمالها وآمنة ولن تقدم أي ثغرة أمنية XSS أو (Cross Site Scripting vulnerability) عبر الموقع سواء باستخدام وظيفة <span dir="ltr">`eval()`</span> أو التلاعب بـ DOM لإدخال تعليمات برمجية ضارة في صفحتك.
|
|
|
|
|
|
|
|
## الرخصة
|
|
## الرخصة
|
|
|
|
|
|
|
|
حقوق النشر محفوظة © 2019-2020 لـ Caleb Porzio والمساهمين.
|
|
حقوق النشر محفوظة © 2019-2020 لـ Caleb Porzio والمساهمين.
|
|
|
|
|
|
|
|
-مرخص بموجب ترخيص MIT، راجع [LICENSE.md](LICENSE.md) للحصول على التفاصيل.
|
|
|
|
|
|
|
+مرخص بموجب ترخيص MIT، راجع [LICENSE.md](LICENSE.md) للحصول على التفاصيل.
|
|
|
|
|
+
|
|
|
|
|
+</div>
|
Caleb Porzio