Halo teman-teman semuanya, di artikel sebelumnya, kita sudah membahas tentang lifecycle hooks di Alpine.js, yang sangat berguna untuk mengatur proses inisialisasi dan perubahan data. Nah, sekarang kita akan bahas sesuatu yang tidak kalah penting, yaitu Magic Properties.
Magic Properties adalah properti khusus yang disediakan oleh Alpine.js dan bisa kita akses langsung dalam ekspresi seperti x-data, x-on, x-bind, dan lainnya. Properti ini diawali dengan tanda dolar ($) dan memberikan kita akses ke fitur internal Alpine.
Apa Itu Magic Properties?
Magic properties memberikan akses cepat ke berbagai fitur bawaan Alpine.js, seperti:
- Manipulasi DOM
- Interaksi antar komponen
- Pengamatan reaktif
- Dan lainnya
Semua properti ini diawali dengan simbol $, dan hanya bisa digunakan di dalam konteks Alpine.js (tidak tersedia di JavaScript global).
Daftar Magic Properties Penting
Berikut beberapa magic properties yang paling sering digunakan:
| Magic Property |
Kegunaan |
$el |
Mengacu pada elemen HTML tempat Alpine digunakan |
$refs |
Mengakses elemen yang diberi x-ref di dalam komponen |
$watch |
Mengamati perubahan pada data tertentu |
$store |
Mengakses global state (jika menggunakan Alpine store) |
$dispatch |
Mengirim custom event ke komponen lain |
$nextTick |
Menunggu hingga DOM selesai diperbarui |
$root |
Mengacu pada elemen x-data terluar |
1. $el: Elemen Saat Ini
<div x-data x-init="console.log($el)">
<p>Ini adalah elemen `$el`</p>
</div>
2. $refs: Referensi ke Elemen Lain
<div x-data="{
fokusInput() { $refs.nama.focus() }
}">
<input x-ref="nama" type="text" placeholder="Nama">
<button @click="fokusInput">Fokus ke Input</button>
</div>
3. $watch: Mengamati Perubahan Data
<div x-data="{ angka: 0 }" x-init="$watch('angka', value => console.log('Angka:', value))">
<button @click="angka++">Tambah</button>
</div>
4. $dispatch: Mengirim Event ke Komponen Lain
<!-- Komponen Anak -->
<div x-data @click="$dispatch('custom-event', { pesan: 'Halo dari anak!' })">
<button>Trigger Event</button>
</div>
<!-- Komponen Induk -->
<div @custom-event.window="alert($event.detail.pesan)">
<!-- Event akan tertangkap di sini -->
</div>
5. $nextTick: Tunggu Sampai DOM Selesai
<div x-data="{ teks: '' }">
<input x-model="teks">
<button @click="teks = 'Loading...'; $nextTick(() => teks = 'Selesai!')">Ubah Teks</button>
<p x-text="teks"></p>
</div>
6. $store: Akses State Global
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('mode', {
dark: false,
toggle() {
this.dark = !this.dark
}
})
})
</script>
<div x-data>
<button @click="$store.mode.toggle()">Toggle Mode</button>
<p x-text="$store.mode.dark ? 'Dark Mode' : 'Light Mode'"></p>
</div>
Kesimpulan
Di artikel ini, kita sudah mengenal berbagai Magic Properties di Alpine.js yang memudahkan kita mengakses elemen, mengamati data, mengelola event, dan bahkan membuat store global.
Di artikel berikutnya, kita akan belajar tentang Transition dan Animasi di Alpine.js, supaya tampilan aplikasi kita jadi lebih interaktif dan menarik secara visual.
Terima Kasih