Belajar Alpine.js Dasar #2: Dasar-Dasar x-data dan Binding Data

• Apa Itu x-data?
• Binding Data dengan x-text
• Binding Data dengan Interpolasi (tidak direkomendasikan)
• Binding ke Input dengan x-model
• Data Bertipe Lain
• Kesimpulan

Halo teman-teman semuanya, di artikel kedua ini kita akan membahas tentang dasar-dasar x-data dan bagaimana cara binding data di Alpine.js. Konsep ini sangat penting karena menjadi fondasi dari semua interaksi yang akan kita buat dengan Alpine.

Kalau di artikel sebelumnya kita sudah berhasil menginstall Alpine.js dan membuat contoh toggle sederhana, sekarang kita akan lebih mendalami bagaimana Alpine mengelola data di dalam HTML.

Apa Itu x-data?

x-data adalah directive utama di Alpine.js yang digunakan untuk mendefinisikan data lokal dalam sebuah komponen.

Kita bisa menganggap setiap elemen yang memiliki x-data sebagai sebuah komponen kecil yang punya datanya sendiri, mirip seperti component di framework besar.

Contoh:

<div x-data="{ message: 'Halo dari Alpine!' }">
  <p x-text="message"></p>
</div>

Penjelasan:

• x-data berisi objek JavaScript yang menyimpan data.
• x-text digunakan untuk menampilkan nilai dari message ke dalam elemen <p>.

Output di browser akan menampilkan:

Halo dari Alpine!

Binding Data dengan x-text

Kita bisa menggunakan x-text untuk menampilkan nilai dari sebuah properti secara textual ke dalam elemen HTML.

<div x-data="{ nama: 'Santri Koding' }">
  <h2 x-text="nama"></h2>
</div>

Saat halaman dibuka, tulisan “Santri Koding” akan muncul dalam elemen <h2>.

Perlu diingat: x-text akan mengganti isi elemen, jadi jangan gabungkan dengan teks lain di dalamnya.

Binding Data dengan Interpolasi (tidak direkomendasikan)

Alpine.js sebenarnya juga mendukung interpolasi seperti ini:

<span x-data="{ jumlah: 5 }">
  {{ jumlah }}
</span>

Namun ini tidak disarankan, karena sifatnya tidak sekuat binding langsung seperti x-text. Kalau kita pakai Tailwind atau template engine lainnya, interpolasi ini bisa bentrok. Jadi lebih baik tetap gunakan directive seperti x-text.

Binding ke Input dengan x-model

Kalau kita ingin menghubungkan input form ke data, kita bisa pakai x-model.

<div x-data="{ nama: '' }">
  <input type="text" x-model="nama" placeholder="Masukkan nama">
  <p>Hai, <span x-text="nama"></span>!</p>
</div>

Ketika kita mengetik di input, teks di bawahnya langsung berubah mengikuti isi input tersebut. Ini yang disebut two-way binding, perubahan pada input memengaruhi data, dan data bisa memengaruhi tampilan.

Data Bertipe Lain

Kita bisa menyimpan berbagai tipe data di x-data, misalnya angka, boolean, array, bahkan objek:

<div x-data="{ counter: 0, aktif: true, user: { nama: 'Ahmad' } }">
  <p x-text="counter"></p>
  <p x-text="user.nama"></p>
</div>

Kesimpulan

Di artikel ini, kita sudah belajar cara menggunakan x-data untuk mendefinisikan state lokal, serta bagaimana cara menampilkannya ke dalam HTML menggunakan x-text dan x-model. Kita juga sudah melihat contoh binding dua arah antara input dan teks.

Di artikel berikutnya, kita akan belajar Event Handling, yaitu bagaimana cara menangani event seperti klik tombol, input, dan lainnya agar aplikasi kita jadi lebih interaktif.

Terima kasih