Data Binding & State Management

Penjelasan pola pengikatan data (Data Binding) dan pengelolaan state reaktif dalam aplikasi portal modern.

1. Pola Binding Data

Jenis Binding	Cara Kerja	Contoh Penggunaan
One-Way Binding	Nilai mengalir dari sumber data state ke elemen tampilan DOM.	Menampilkan teks judul dokumen, timestamp, atau avatar profil.
Two-Way Binding	Perubahan pada input kontrol langsung memperbarui variabel state di memori secara simultan.	`bind:value` pada form input, text editor dokumen, dan filter pencarian.

2. Global State Store Svelte 5

Untuk mengelola state lintas halaman (misalnya tema gelap/terang, modal dialog, dan status drawer AI Copilot), portal menggunakan objek store modular:

TYPESCRIPT

class="tok-comment">// src/lib/stores/ui.svelte.ts
class UiStore {
  isAiOpen = $state(false);
  searchOpen = $state(false);
  isDark = $state(false);
  
  toggleTheme() {
    this.isDark = !this.isDark;
    this.applyTheme();
  }
}
export const ui = new UiStore();