استخدام template في العرض باستخدام JavaScript
دمج القوالب مع حلقات JavaScript لإنشاء قوائم ديناميكية
استخدام template في العرض باستخدام JavaScript درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
عنصر template
يحتوي العنصر <template> على HTML لا يتم عرضه حتى يستنسخه JavaScript ويُدرجه. يكون محتواه غير نشط — فلا تُشغَّل البرامج النصية، ولا تُحمَّل الصور، ولا تُطبَّق الأنماط — حتى يتم تفعيل القالب.
الوصول إلى محتوى القالب
يوجد محتوى القالب في كائن DocumentFragment ضمن template.content. ولاستخدامه، استنسخ الجزء: const clone = template.content.cloneNode(true). ينشئ الوسيط true نسخة عميقة تشمل جميع العقد التابعة.
عرض نسخ القالب
خصّص النسخة المستنسخة قبل إدراجها: نفّذ الاستعلام داخل النسخة، واضبط محتوى النص، وأضف مستمعي الأحداث. ثم أضفها إلى DOM: container.appendChild(clone). تنشئ كل عملية cloneNode() نسخة مستقلة — يمكنك تعديل إحداها دون التأثير في النسخ الأخرى.
const tmpl = document.getElementById("card-template");
function renderCard(data) {
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".title").textContent = data.title;
clone.querySelector(".body").textContent = data.body;
container.appendChild(clone);
}عرض القوائم من القوالب
اجمع بين القوالب وArray.forEach أو Array.map لعرض القوائم: استنسخ القالب لكل عنصر في data، واملأ القيم، ثم أضف العنصر إلى حاوية القائمة. يشبه هذا النمط أطر العمل، لكنه مبني على HTML وJavaScript القياسيين.
قالب لصفوف الجداول
عرّف <template> يحتوي على <tr> مع خلايا. استنسخه واملأه لكل صف من البيانات. يؤدي ذلك إلى تجنب دمج السلاسل النصية لإنشاء HTML — فلا حاجة إلى إجراء escaping، لأنك تضبط textContent بدلًا من innerHTML.
تفعيل القالب صريح
لا تُعرض القوالب تلقائيًا أبدًا. وهذا يجعلها آمنة لتخزين أجزاء سيتم عرضها بشروط: اعرض قالب «لا توجد نتائج» فقط عندما يُرجع البحث نتيجة فارغة، وقالب الخطأ فقط عند فشل الشبكة، وهيكل التحميل أثناء جلب البيانات.
القوالب المتداخلة
يمكن أن يحتوي قالب على قوالب أخرى — وتظل القوالب المتداخلة غير نشطة داخل DocumentFragment الخاص بالقالب الخارجي. يتيح ذلك إنشاء تسلسلات هرمية شبيهة بالمكوّنات، حيث يستنسخ القالب الخارجي القوالب الداخلية ويفعّلها عند الحاجة.
الأنماط ذات النطاق المحدد في القوالب
لا تُطبَّق الأنماط الموجودة داخل وسم <style> في القالب على المستند — إذ تظل غير نشطة حتى يتم إنشاء نسخة من القالب ونقل محتواه إلى DOM النشط. يتيح ذلك للقوالب أن تحمل أنماطها الخاصة دون تلويث الصفحة.
template مقابل innerHTML
تُجري معالجة innerHTML تحليلًا متزامنًا لسلسلة HTML — إذ تعيد تحليل HTML في كل مرة. أما template.cloneNode() فينسخ شجرة سبق تحليلها. عند تكرار عرض البنية نفسها، يكون استنساخ القالب أسرع ويتجنب مخاطر XSS الناتجة عن دمج السلاسل النصية.
قيود ربط البيانات
لا يوفر عنصر template ربطًا مدمجًا للبيانات — يجب عليك تنفيذ استعلام وتعبئة كل نسخة مستنسخة يدويًا. إذا كانت احتياجات ربط البيانات معقدة، فسيكون استخدام إطار عمل أو مكتبة أنسب. صُممت القوالب لأنماط العرض اليدوي البسيطة دون العبء الإضافي لإطار عمل.
دعم المتصفحات
يدعم جميع المتصفحات الحديثة عنصر template، مع أن IE11 كان يوفر دعمًا جزئيًا. بالنسبة إلى البيئات التي تتطلب دعم IE، استخدم polyfill لتحليل محتوى القالب عند التهيئة. أما في المشاريع الحديثة، فاستخدم template دون polyfill.
اختبار المعرفة
لماذا يُفضَّل استخدام template.content.cloneNode(true) على innerHTML عند تكرار العرض؟
الملخص
يحتوي عنصر template على أجزاء HTML غير نشطة سبق تحليلها. يؤدي استنساخ template.content إلى إنشاء نسخ مستقلة لربط البيانات يدويًا. وبالاقتران مع ضبط textContent، من دون XSS، تتيح القوالب عرض القوائم بأسلوب يشبه أطر العمل، وإنشاء واجهة مستخدم شرطية، وأنماط HTML قابلة لإعادة الاستخدام، باستخدام واجهات المتصفح القياسية فقط.
الأسئلة الشائعة
هل درس «استخدام template في العرض باستخدام JavaScript» مجاني؟
نعم — نص درس «استخدام template في العرض باستخدام JavaScript» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «استخدام template في العرض باستخدام JavaScript»؟
دمج القوالب مع حلقات JavaScript لإنشاء قوائم ديناميكية تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «استخدام template في العرض باستخدام JavaScript»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- عنصر template: محتوى غير نشط
- استنساخ القوالب باستخدام cloneNode
- استخدام template في العرض باستخدام JavaScript
- القوالب في مقابل innerHTML من منظور الأمان