bind:value لحقول النص
حافظ تلقائيًا على مزامنة قيم حقول النص مع متغيرات المكوّن
bind:value لحقول النص درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ما الذي يفعله bind:value
ينشئ التوجيه bind:value اتصالًا ثنائي الاتجاه بين متغير وحقل إدخال في نموذج.
مثال أساسي
اربطوا متغيرًا مُعلنًا باستخدام let بحقل إدخال نصي. يؤدي إدخال النص إلى تحديث المتغير، وتؤدي التغييرات البرمجية إلى تحديث الحقل.
<script>
let name = "";
</script>
<input bind:value={name} />
<p>Hello {name}</p>الصياغة المختصرة
إذا كان المتغير والسمة يحملان الاسم نفسه، فاحذفوا الجانب الأيمن.
<input bind:value />حقول الأرقام
بالنسبة إلى type="number"، يحوّل Svelte القيمة إلى رقم تلقائيًا.
<input type="number" bind:value={age} />حقول النطاق
تعمل أشرطة التمرير بالطريقة نفسها، وتحول القيم إلى أرقام أيضًا.
<input type="range" bind:value={volume} />مناطق النص
اربطوا value في مناطق النص كما تفعلون في حقول الإدخال.
<textarea bind:value={comment}></textarea>تحديد خيار واحد
بالنسبة إلى عنصر <select> واحد، اربطوا القيمة بقيمة الخيار المحدد.
<select bind:value={color}>
<option>red</option>
<option>blue</option>
</select>تحديث برمجي
يؤدي إسناد قيمة إلى المتغير المرتبط إلى تحديث حقل الإدخال فورًا. وهذا مفيد لأزرار مسح النموذج.
function clear() { name = ""; }لا حاجة إلى إعادة التصيير
تحدث التفاعلية تلقائيًا. ولا تستدعون setState أو تعيدون الربط يدويًا مطلقًا.
التحقق
أضيفوا عبارات تفاعلية للتحقق من صحة البيانات أثناء كتابة المستخدم.
$: isValid = email.includes("@");تأخير التنفيذ
بالنسبة إلى عمليات التحقق المكلفة، طبّقوا تأخير التنفيذ داخل عبارة تفاعلية أو استخدموا أداة مثل lodash.debounce.
تحقق سريع
ماذا يفعل bind:value؟
مراجعة
استخدموا bind:value للربط ثنائي الاتجاه بحقول الإدخال، مع تحويل تلقائي للأنواع في حقول الأرقام والنطاق.
الأسئلة الشائعة
هل درس «bind:value لحقول النص» مجاني؟
نعم — نص درس «bind:value لحقول النص» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «bind:value لحقول النص»؟
حافظ تلقائيًا على مزامنة قيم حقول النص مع متغيرات المكوّن تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «bind:value لحقول النص»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- bind:value لحقول النص
- bind:checked لمربعات الاختيار
- bind:group لمجموعات أزرار الاختيار ومربعات الاختيار
- bind:this لمراجع عناصر DOM