{#each ...}

{#each expression as name}...{/each}

{#each expression as name, index}...{/each}

Vous pouvez itérer sur des valeurs en utilisant un bloc #each. Les valeurs en questions peuvent être des tableaux, des objets similaires à des tableaux (c-à-d tout ce qui possède une propriété length), ou des itérables comme Map et Set — autrement dit, tout ce qui peut être utilisé avec Array.from.

<h1>Shopping list</h1>
<ul>
	{#each items as item}
		<li>{item.name} x {item.qty}</li>
	{/each}
</ul>

Un bloc #each peut également préciser un index, correspondant au deuxième argument d’un callback array.map(...).

{#each items as item, i}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

Les blocs each à clé

{#each expression as name (key)}...{/each}

{#each expression as name, index (key)}...{/each}

Si une expression key est fournie — qui se doit d’identifier de manière unique chaque élément de la liste — Svelte va s’en servir intelligemment pour mettre à jour les éléments de la liste en insérant, déplaçant et supprimant des éléments, plutôt qu’en ajoutant ou supprimant des éléments à la fin de la liste et ensuite modifiant l’état des éléments au milieu.

La clé (key) peut être n’importe quel objet, mais les chaînes de caractères et les nombres sont recommandés car il permettent à l’identité de persister lorsque les objets eux-mêmes changent.

{#each items as item (item.id)}
	<li>{item.name} x {item.qty}</li>
{/each}

<!-- ou avec la valeur d'index additionnelle -->
{#each items as item, i (item.id)}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

Vous pouvez déstructurer librement ou utiliser comme bon vous semble le paramètre de reste dans les blocs #each.

{#each items as { id, name, qty }, i (id)}
	<li>{i + 1}: {name} x {qty}</li>
{/each}

{#each objects as { id, ...rest }}
	<li><span>{id}</span><MyComponent {...rest} /></li>
{/each}

{#each items as [id, ...rest]}
	<li><span>{id}</span><MyComponent values={rest} /></li>
{/each}

Blocs each sans élément

{#each expression}...{/each}

{#each expression, index}...{/each}

Dans le cas où vous souhaitez uniquement afficher quelque chose n fois, vous pouvez omettre le as (demo):

<div class="chess-board">
	{#each { length: 8 }, rank}
		{#each { length: 8 }, file}
			<div class:black={(rank + file) % 2 === 1}></div>
		{/each}
	{/each}
</div>

Blocs else

{#each expression as name}...{:else}...{/each}

Un bloc #each peut également avoir une clause {:else}, qui sera affichée si la liste est vide.

{#each todos as todo}
	<p>{todo.text}</p>
{:else}
	<p>Rien à faire aujourd'hui !</p>
{/each}