Conditional Rendering Svelte — Svelte

Svelte menggunakan block syntax {#if} untuk conditional rendering. {#if} let loggedIn = false {#if loggedIn} loggedIn = false}>Log out {:else} loggedIn =…

Conditional rendering artinya menampilkan sebagian markup hanya kalau sebuah kondisi benar. Di Svelte caranya pakai blok {#if}. Bayangin papan status di etalase Warung Bu Sri. Bu Sri punya tiga papan: "Tersedia", "Tinggal sedikit", dan "Habis". Yang digantung cuma satu, sesuai isi panci. Papan lainnya bukan ditutupi kain, tapi disimpan di laci. {#if} bekerja seperti itu: cabang yang terpilih ada di halaman, cabang lainnya gak ada sama sekali.

🧪 Tebakan cepat: stok Mie Ayam tinggal 0. Kodenya {#if stok <= 3} <p>Tinggal {stok} porsi!</p> {:else if stok === 0} <p>Habis</p> {/if}. Yang tampil Habis atau Tinggal 0 porsi!? Jawabannya ada di bagian "Urutan cabang menentukan".

{#if}: tampil kalau kondisinya benar

<script>
  let stok = 2
</script>

<button on:click={() => stok -= 1}>Jual 1</button>

{#if stok === 0}
  <p>Habis</p>
{/if}
Kejadian stok Tampil di bawah tombol
Awal 2 (gak ada apa-apa)
Klik Jual 1 1 (gak ada apa-apa)
Klik lagi 0 Habis

{:else}: cabang sebaliknya

Ini contoh dari latihan pertama:

<script>
  let loggedIn = false
</script>

{#if loggedIn}
  <p>Selamat datang!</p>
{:else}
  <p>Silakan login</p>
{/if}

<button on:click={() => loggedIn = !loggedIn}>
  {loggedIn ? 'Logout' : 'Login'}
</button>
Kejadian loggedIn <p> Tombol
Awal false Silakan login Login
Klik true Selamat datang! Logout
Klik lagi false Silakan login Login

{:else if}: lebih dari dua kemungkinan

Papan status warung punya tiga kemungkinan:

{#if stok === 0}
  <p>Habis</p>
{:else if stok <= 3}
  <p>Tinggal {stok} porsi!</p>
{:else}
  <p>Tersedia: {stok} porsi</p>
{/if}
stok Tampil
4 Tersedia: 4 porsi
2 Tinggal 2 porsi!
0 Habis

Svelte memeriksa kondisinya dari atas ke bawah dan berhenti di kondisi pertama yang benar. Sisanya gak diperiksa lagi.

Latihan kedua memakai pola yang sama untuk huruf nilai, dengan let nilai = 85:

{#if nilai >= 90}
  <p>A</p>
{:else if nilai >= 80}
  <p>B</p>
{:else if nilai >= 70}
  <p>C</p>
{:else}
  <p>D</p>
{/if}

Nilai 95 jadi A, 85 jadi B, 75 jadi C, dan 50 jadi D. Dengan 85, kondisi pertama (>= 90) salah, kondisi kedua (>= 80) benar, jadi yang tampil satu <p> berisi B.

Urutan cabang menentukan

Ini kode dari tebakan:

{#if stok <= 3}
  <p>Tinggal {stok} porsi!</p>
{:else if stok === 0}
  <p>Habis</p>
{/if}

Dengan stok 0, yang tampil Tinggal 0 porsi!. Itu jawaban tebakannya. 0 <= 3 itu benar, dan kondisi itu ada di atas, jadi Svelte berhenti di situ dan gak pernah sampai ke stok === 0. Hasil compile-nya memperlihatkan hal yang sama:

function select_block_type(ctx, dirty) {
  if (/*stok*/ ctx[0] <= 3) return create_if_block;
  if (/*stok*/ ctx[0] === 0) return create_if_block_1;
}

Aturannya: taruh kondisi yang paling sempit di atas. stok === 0 lebih sempit daripada stok <= 3, jadi dia duluan. Untuk huruf nilai, nilai >= 90 harus di atas nilai >= 80. Kalau nilai >= 70 ditaruh paling atas, nilai 85 malah jadi C.

Yang gak terpilih gak ada di halaman

Saat cabang berganti, Svelte menghapus elemen cabang lama dari DOM dan membuat elemen cabang baru. Kalau cabangnya tetap sama, misalnya dari Tinggal 3 porsi! ke Tinggal 2 porsi!, Svelte cuma mengganti teks angkanya.

Akibatnya, isi yang diketik di dalam cabang ikut hilang. Kalau ada <input> di dalam {#if buka} dan kamu mengetik "pedas", lalu buka jadi false dan true lagi, kolomnya kosong. Itu kolom baru, bukan kolom yang tadi. Kalau isinya harus tetap ada, sembunyikan elemennya dengan CSS (misalnya style="display: none") daripada {#if}.

Svelte 5

Bloknya sama persis di Svelte 5: {#if}, {:else if}, {:else}, {/if}. Yang berubah cuma state dan event-nya, misalnya let loggedIn = $state(false) dan onclick={() => loggedIn = !loggedIn}.

⚠️ Jebakan yang sering ketemu

TL;DR: {#if kondisi} ... {/if} menampilkan markup hanya kalau kondisinya benar. {:else} untuk sebaliknya, {:else if kondisi} untuk kemungkinan berikutnya. # membuka, : melanjutkan, / menutup. Svelte memeriksa dari atas dan berhenti di kondisi pertama yang benar, jadi taruh kondisi yang paling sempit di atas. Cabang yang gak terpilih benar-benar gak ada di DOM, dan isinya dibuat ulang saat terpilih lagi. Latihannya: loggedIn false menampilkan Silakan login dan berubah jadi Selamat datang! setelah diklik; nilai = 85 dengan cabang >= 90, >= 80, >= 70, {:else} menampilkan B. Sintaks bloknya sama di Svelte 5.

Yang akan kamu pelajari