تعرف على كيفية التعامل مع الحلقات في قوالب Svelte
في قوالب Svelte ، يمكنك إنشاء حلقة باستخدام ملف{#each}{/each}
بناء الجملة:
<script>
let goodDogs = ['Roger', 'Syd']
</script>
{#each goodDogs as goodDog}
<li>{goodDog}</li>
{/each}
إذا كنت معتادًا على الأطر الأخرى التي تستخدم القوالب ، فهي بناء جملة مشابه جدًا.
يمكنك الحصول على فهرس التكرار باستخدام:
<script>
let goodDogs = ['Roger', 'Syd']
</script>
{#each goodDogs as goodDog, index}
<li>{index}: {goodDog}</li>
{/each}
(تبدأ الفهارس من 0)
عند تحرير القوائم ديناميكيًا وإزالة العناصر وإضافتها ، يجب عليك دائمًا تمرير معرّف في القوائم ، لمنع حدوث مشكلات.
يمكنك القيام بذلك باستخدام بناء الجملة التالي:
<script>
let goodDogs = ['Roger', 'Syd']
</script>
{#each goodDogs as goodDog (goodDog)}
<li>{goodDog}</li>
{/each}
<!-- with the index -->
{#each goodDogs as goodDog, index (goodDog)}
<li>{goodDog}</li>
{/each}
يمكنك تمرير كائن أيضًا ، ولكن إذا كانت قائمتك تحتوي على معرف فريد لكل عنصر ، فمن الأفضل استخدامه:
<script>
let goodDogs = [
{ id: 1, name: 'Roger'},
{ id: 2, name: 'Syd'}
]
</script>
{#each goodDogs as goodDog (goodDog.id)}
<li>{goodDog.name}</li>
{/each}
<!-- with the index -->
{#each goodDogs as goodDog, index (goodDog.id)}
<li>{goodDog.name}</li>
{/each}
تحميل مجانيكتيب Svelte
المزيد من البرامج التعليمية svelte:
- الشروع في العمل مع Svelte - برنامج تعليمي قصير
- كيفية العمل مع الدعائم في Svelte
- كيفية استيراد المكونات في Svelte
- كيفية تصدير الوظائف والمتغيرات من مكون Svelte
- قوالب Svelte: المنطق الشرطي
- كيفية عرض مكون Svelte عند الطلب
- فتحات رشيقة
- كيفية إضافة التعليقات في قوالب Svelte
- Svelte Bindings
- معالجة تحديثات الحالة في Svelte
- جمل رد الفعل في Svelte
- أحداث دورة الحياة الرشيقة
- قوالب Svelte: الحلقات
- حل الوعود في قوالب Svelte
- العمل مع الأحداث في Svelte
- إدارة الحالة عبر المكونات في Svelte
- كيفية الوصول إلى معلمة URL في Sapper خارج وحدة البرنامج النصي
- كيفية تطبيق CSS ديناميكيًا في Svelte
- كيفية إعادة التوجيه إلى عنوان URL في Sapper
- كيفية محاكاة حلقة for في قوالب Svelte