Jaka jest prawidłowa składnia bloku warunkowego w Svelte?

{% if condition %}...{% endif %}

Po co używamy klucza (key) w bloku {#each}?

Aby Svelte mógł śledzić tożsamość elementów przy aktualizacjach

Kurs Svelte i SvelteKit · Moduł 6: Logika szablonów

Norny - Logika szablonów

1 min czytania · Zaktualizowano 13 sierpnia 2026

Udostępnij

W tej lekcji4

Witaj przy Studni Urd, gdzie Norny tkają nici losu! Tak jak one decydują o przyszłości, tak bloki logiczne decydują co zostanie wyrenderowane.

{#if} - Renderowanie warunkowe

<script>
  let isViking = $state(true);
  let health = $state(75);
</script>

{#if isViking}
  <p>Witaj, wojowniku!</p>
{/if}

{#if health > 50}
  <p class="healthy">Zdrowy</p>
{:else if health > 20}
  <p class="wounded">Ranny</p>
{:else}
  <p class="critical">Stan krytyczny!</p>
{/if}

{#each} - Iteracja

<script>
  let warriors = $state([
    { id: 1, name: 'Ragnar', rank: 'Jarl' },
    { id: 2, name: 'Bjorn', rank: 'Drengr' },
    { id: 3, name: 'Ivar', rank: 'Drengr' }
  ]);
</script>

<ul>
  {#each warriors as warrior}
    <li>{warrior.name} - {warrior.rank}</li>
  {/each}
</ul>

<!-- Z indeksem -->
{#each warriors as warrior, index}
  <p>{index + 1}. {warrior.name}</p>
{/each}

<!-- Z kluczem (ważne dla animacji i stanu!) -->
{#each warriors as warrior (warrior.id)}
  <WarriorCard {warrior} />
{/each}

Destrukturyzacja w each

{#each warriors as { name, rank, health }}
  <div class="warrior">
    <h3>{name}</h3>
    <p>Ranga: {rank}</p>
    <p>Zdrowie: {health}</p>
  </div>
{/each}

{#each} z else

{#each warriors as warrior}
  <WarriorCard {warrior} />
{:else}
  <p>Brak wojowników w obozie.</p>
{/each}

Norny tkają los - bloki logiczne tkają interfejs!

Kod do tej lekcji: App.svelte

<script>
  // Norns - Three sisters weaving destiny
  // {#if}, {#each}, {#await} - weaving fate

  let isLoggedIn = $state(false);
  let userRole = $state('warrior');
</script>

<main class="norns">
  <h1>Norns - Template Logic</h1>
  <p class="subtitle">Urd, Verdandi, Skuld weave destiny</p>

  <section>
    <h2>{"{#if}"} - Conditional rendering</h2>

    <div class="controls">
      <button onclick={() => isLoggedIn = !isLoggedIn}>
        {isLoggedIn ? 'Log out' : 'Log in'}
      </button>

      <select bind:value={userRole}>
        <option value="warrior">Warrior</option>
        <option value="jarl">Jarl</option>
        <option value="skald">Skald</option>
      </select>
    </div>

    <div class="result">
      {#if isLoggedIn}
        <div class="logged-in">
          <p>Welcome to Valhalla!</p>

          {#if userRole === 'jarl'}
            <p class="role">You have access to the Jarl's chamber</p>
          {:else if userRole === 'skald'}
            <p class="role">You may sing the songs</p>
          {:else}
            <p class="role">Ready for battle!</p>
          {/if}
        </div>
      {:else}
        <p class="logged-out">You must log in</p>
      {/if}
    </div>
  </section>
</main>

<style>
  .norns {
    font-family: 'Georgia', serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #1a0a2e 0%, #0d0d1a 100%);
    color: #e8d5f7;
    min-height: 100vh;
  }

  h1 {
    color: #b19cd9;
    text-align: center;
  }

  .subtitle {
    text-align: center;
    color: #8b7ca8;
  }

  section {
    background: rgba(177, 156, 217, 0.1);
    border: 1px solid #b19cd9;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
  }

  h2 {
    color: #b19cd9;
    font-size: 1.1rem;
    margin-top: 0;
  }

  .controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  button {
    padding: 0.5rem 1rem;
    background: #4a2c7a;
    color: white;
    border: 1px solid #b19cd9;
    border-radius: 4px;
    cursor: pointer;
  }

  button:hover {
    background: #5a3c8a;
  }

  select {
    padding: 0.5rem;
    background: #2c1810;
    color: #e8d5f7;
    border: 1px solid #b19cd9;
    border-radius: 4px;
  }

  .result {
    padding: 1rem;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
  }

  .logged-in {
    color: #90ee90;
  }

  .logged-out {
    color: #ff6b6b;
  }

  .role {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(177, 156, 217, 0.2);
    border-radius: 4px;
  }
</style>

Hasła z dokumentacji w tej lekcji

Widzisz błąd w tej lekcji?

Sprawdź się

Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.

1. Jaka jest prawidłowa składnia bloku warunkowego w Svelte?
2. Po co używamy klucza (key) w bloku {#each}?

Zadania praktyczne w grze

Edytor kodu
Uzupełnij kod, aby wyświetlić listę wojowników