قوالب Svelte: الحلقات

تعرف على كيفية التعامل مع الحلقات في قوالب 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: