{#snippet} و {@render}
عرّف أجزاءً قابلة لإعادة الاستخدام من القالب باستخدام snippets واعرضها في أي موضع.
{#snippet} و {@render} درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
المقاطع
المقاطع أجزاء قابلة لإعادة الاستخدام من القوالب في Svelte 5، وتشبه دوال التصيير أو الفتحات المسمّاة.
تعريف مقطع
استخدم {#snippet name(args)}...{/snippet}.
{#snippet greeting(name)}
<p>Hello, {name}!</p>
{/snippet}تصيير مقطع
استخدم {@render name(args)} لاستدعائه.
{@render greeting("Ada")}معاملات المقاطع
تقبل المقاطع الوسائط مثل الدوال؛ وتمررها عملية التصيير إليها.
إمكانية إعادة الاستخدام
عرّف المقطع مرة واحدة، ثم صيّره مرات عديدة باستخدام وسائط مختلفة.
{@render greeting("Ada")}
{@render greeting("Bea")}استبدال التكرار
تقلّل المقاطع التكرار في المكوّنات التي تحتوي على قدر كبير من الترميز.
التعريف داخل المكوّنات
توجد المقاطع داخل ترميز المكوّن، وليس في JS.
النطاق
يمكن للمقاطع الرجوع إلى المتغيرات الموجودة في نطاق المكوّن المحيط بها.
تمريرها كخصائص
يمكن تمرير المقاطع كخصائص إلى مكوّنات أخرى لإنشاء تركيب مرن.
بديل للفتحات
تعمّم المقاطع مفهوم الفتحات: فهي أكثر مرونة وقابلية للتركيب، كما أنها معرّفة بالأنواع.
TypeScript
تُستنتج أنواع المقاطع من معاملاتها وأنواع القيم التي تعيدها.
اختبار سريع
كيف تصيّر مقطعًا؟
مراجعة
المقاطع أجزاء مَعْلَمية من القوالب. عرّفها باستخدام {#snippet} واستدعها باستخدام {@render}.
الأسئلة الشائعة
هل درس «{#snippet} و {@render}» مجاني؟
نعم — نص درس «{#snippet} و {@render}» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «{#snippet} و {@render}»؟
عرّف أجزاءً قابلة لإعادة الاستخدام من القالب باستخدام snippets واعرضها في أي موضع. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «{#snippet} و {@render}»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- $props() للخصائص ذات الأنواع
- {#snippet} و {@render}
- تمرير snippets كخصائص
- snippets الافتراضية والمسمّاة