{#if} & {#each} — Bedingungen und Schleifen

Bedingungen mit {#if}

In Svelte steuerst du sichtbare Inhalte direkt im Markup mit Logik-Blöcken. Ein Block beginnt mit {#…}, kann Zwischen-Zweige mit {:…} haben und endet mit {/…}. Für Bedingungen nutzt du {#if}:

{#if punkte >= 100}
  <p>🏆 Gewonnen!</p>
{:else if punkte >= 50}
  <p>Fast geschafft …</p>
{:else}
  <p>Weiter so!</p>
{/if}

{:else if} und {:else} sind optional — genau wie in jeder normalen if-Kette. Der Inhalt eines nicht zutreffenden Zweigs wird gar nicht ins DOM gerendert (nicht nur versteckt).

<%# Rails/ERB: Bedingung und Schleife im View %>
<% if @aufgaben.any? %>
  <ul>
    <% @aufgaben.each_with_index do |aufgabe, i| %>
      <li><%= i + 1 %>. <%= aufgabe.text %></li>
    <% end %>
  </ul>
<% else %>
  <p>Keine Aufgaben.</p>
<% end %>

Listen mit {#each}

Mit {#each} rendest du eine Liste. In der einfachsten Form iterierst du über ein Array und bindest jedes Element an einen Namen:

{#each aufgaben as aufgabe}
  <li>{aufgabe.text}</li>
{/each}

Index als zweites Argument

Brauchst du die Position, gibst du nach dem Element einen Index-Namen an:

{#each aufgaben as aufgabe, i}
  <li>{i + 1}. {aufgabe.text}</li>
{/each}

Der Schlüssel (Key) — wichtig!

In runden Klammern gibst du einen eindeutigen Schlüssel pro Eintrag an. Damit weiß Svelte bei Änderungen der Liste, welches DOM-Element zu welchem Datensatz gehört — und kann gezielt einzelne Einträge aktualisieren, verschieben oder entfernen, statt die ganze Liste neu aufzubauen.

{#each aufgaben as aufgabe (aufgabe.id)}
  <li>{aufgabe.text}</li>
{/each}

Destructuring direkt im each

Wie in normalem JavaScript kannst du das Element gleich zerlegen — das spart wiederholtes aufgabe.:

{#each aufgaben as { id, text, erledigt } (id)}
  <li class:done={erledigt}>{text}</li>
{/each}

Leere Listen mit {:else}

Ein {#each} darf einen {:else}-Zweig haben. Er wird gerendert, wenn die Liste leer ist — ideal für „Keine Einträge"-Hinweise:

{#each treffer as treffer (treffer.id)}
  <li>{treffer.name}</li>
{:else}
  <p>Keine Treffer gefunden.</p>
{/each}

Live ausprobieren

Die folgende Aufgabenliste kombiniert {#if} und {#each} mit echtem State dieser Seite. Der Filter „nur offene" schaltet ein $derived-Array um, und der leere Zustand nutzt {:else}:

Hake alle Aufgaben ab, während „Nur offene zeigen" aktiv ist — dann greift der {:else}-Zweig.

Zusammenfassung