Understanding Svelte's Each Block and Data Binding

Main Point

The each block in Svelte is used to iterate over a list of items and render a template for each item. This feature facilitates dynamic rendering based on the provided data, simplifying the management of lists within your application.

Key Concepts

1. The Each Block

• Purpose: To loop through an array and create a block of HTML for each item.

Syntax:

{#each items as item}
    
{/each}

2. Binding with Each

• Binding: You can bind each item in the list to an input element, facilitating two-way data binding.

Syntax:

{#each items as item}
    
{/each}

This allows changes in the input to update the original array.

3. Keyed Each Blocks

• Using Keys: To optimize reactivity and identify which items have changed, you can provide a key for each item.

Example:

{#each items as item (item.id)}
    {item.name}
{/each}

This ensures Svelte can efficiently update the DOM when items change.

Example

Here’s a simple example demonstrating the each block and binding:

<script>
  let fruits = ['Apple', 'Banana', 'Cherry'];
</script>

<ul>
  {#each fruits as fruit}
    <li>
      <input bind:value={fruit} />
    </li>
  {/each}
</ul>

In this example, a list of fruits is displayed, and each fruit can be edited directly via the input field.

Conclusion

The each block is a powerful feature in Svelte that enables developers to efficiently render lists of items and maintain data integrity through binding. Mastering the use of each and binding can significantly enhance your Svelte applications.