Прервать итерацию (каждый) в Svelte?

Question

Можно ли прервать итерацию в Svelte или ограничить как в угловых (ng-repeat="items in item | limitTo:4")? Например:

{#each items as item, i}
  ...
  {#if i > 4}
    {:break}  <--- break here
  {/if}
  ...
{/each}

Answer 1

В Svelte в настоящее время нет специального синтаксиса для разрывов или диапазонов. Распространенной идиомой является использование объекта {length: N} в качестве параметра #each, который обычно работает лучше, чем создание новых массивов при каждом рендеринге.

{#each {length: 4} as _, i} {items[i]} {/each}

Вот некоторые другие шаблоны, которые работают:

<script>
    let items = ['a', 'b', 'c', 'd', 'e'];
    $: filteredItems = items.slice(0, 4);
    const filterItems = (i) => i.slice(0, 4);
</script>

<div>
    {#each {length: 4} as _, i}
        {items[i]}
    {/each}
</div>
<div>
    {#each items.slice(0, 4) as item}
        {item}
    {/each}
</div>
<div>
    {#each filteredItems as item}
        {item}
    {/each}
</div>
<div>
    {#each filterItems(items) as item}
        {item}
    {/each}
</div>

Answer 2

Блок {:break} отсутствует, но вы можете slice из первых 4 элементов массива, прежде чем выполнять его итерацию.

{#each items.slice(0, 4) as item, i} ... {/each}