ចំពោះ​បញ្ជា​តំរូវ​អោយ​ធ្វើ​វដ្តកម្ម (loop) កញ្ចប់ SvelteKit បាន​ផ្តល់លទ្ធភាព​អោយ​យើង​អាច​ប្រើប្រាស់​បញ្ជា each ជាមួយ​​នឹងកំរង​​ទាំងឡាយ នៅ​ក្នុង​ការធ្វើ​អោយ​ធាតុ HTML មួយ​ចំនួន​ដំណើរការ​វិលចុះ​វិល​ឡើង​រហូត​ដល់​ធាតុ​របស់​កំរង​​ទាំងនោះ​ត្រូវ​បាន​រាប់អស់​។

<!--src/routes/+page.svelte-->
<script>
    const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
    let selected = colors[0]
</script>

<h1 style="color: {selected}">Pick a colour</h1>

<div>
    {#each colors as color, i}
        <button
            style="background: {color}"
            on:click={() => selected = color}
        >{i + 1}</button>
    {/each}
</div>

<style>
    div {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-gap: 5px;
        max-width: 400px;
    }

    button {
        aspect-ratio: 1;
        border-radius: 50%;
    }
</style>

បើ​សិន​ជា​យើង​មាន​បំណង​ចង់​ផ្លាស់ប្តូរ​តំលៃ​ផ្សេង​ៗ​នៅ​ក្នុង​កំរង​ទិន្នន័យ​នៅ​ក្នុង​កម្មវិធី SvelteKit ដោយ​ប្រើប្រាស់​ផ្នែក​នៃ​បញ្ជា each ​យើង​ចាំបាច់​ត្រូវ​ផ្តល់​តំលៃ​ខុស​ៗ​គ្នា​សំរាប់​សំគាល់ធាតុ​និមួយ​ៗ​នៅ​ក្នុង​កំរង​ទិន្នន័យ​។

<!--src/components/Thing.svelte-->
<script>
    const emojis = {
	    apple: '🍎',
	    banana: '🍌',
	    carrot: '🥕',
	    doughnut: '🍩',
	    egg: '🥚'
	}

    export let name

    const emoji = emojis[name]
</script>

<p>{emoji} = {name}</p>

<script>
    import Thing from '../components/Thing.svelte'

    let things = [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'carrot' },
        { id: 4, name: 'doughnut' },
        { id: 5, name: 'egg' }
    ]

    function handleClick() {
        things = things.slice(1)
    }
</script>

<button on:click={handleClick}>
    Remove first thing
</button>

{#each things as thing (thing.id)}
    <Thing name={thing.name} />
{/each}