Two-Way Data Binding dan Reactive Input Handling di JavaScript Modern

Dalam pengembangan aplikasi web modern, sinkronisasi antara data dan tampilan menjadi hal yang sangat penting. Ketika pengguna mengetik di input form, data model harus langsung berubah. Begitu juga ketika data model diubah oleh script, tampilan di halaman harus ikut terupdate secara otomatis. Konsep inilah yang dikenal dengan two-way data binding di JavaScript.

Two-way data binding biasanya ditemukan di framework seperti Vue.js atau Angular, tetapi sebenarnya kamu juga bisa membuatnya sendiri menggunakan vanilla JavaScript dengan bantuan Proxy dan Event Listener. Artikel ini akan membahas bagaimana cara membuat sistem reactive sederhana yang mampu menangani perubahan data dari dua arah baik dari pengguna maupun dari kode program.

Konsep Dasar Two-Way Data Binding

Two-way data binding berarti ada hubungan dua arah antara model (data) dan view (UI):

• Saat user mengubah input di form, data model ikut berubah.

• Saat data model berubah melalui script, tampilan input ikut berubah otomatis.

Untuk mewujudkannya tanpa framework, kita membutuhkan:

1. Data reactive – data yang bisa memicu pembaruan UI saat nilainya berubah.

2. Event listener pada input – agar setiap perubahan dari pengguna bisa memperbarui data model.

3. Renderer function – untuk memperbarui elemen DOM berdasarkan nilai data.

Membuat Reactive Data dengan Proxy

Pertama, kita definisikan data reactive menggunakan Proxy() agar setiap perubahan nilai bisa dideteksi.

const state = {
  name: "John Doe",
  age: 25
};

const reactiveState = new Proxy(state, {
  set(target, key, value) {
    target[key] = value;
    render(); // update tampilan setiap kali data berubah
    return true;
  }
});

Dengan kode di atas, setiap kali reactiveState.name atau reactiveState.age diubah, fungsi render() akan otomatis dipanggil untuk memperbarui UI.

Membuat Fungsi Render untuk Update UI

Selanjutnya, buat fungsi yang akan memperbarui tampilan berdasarkan nilai terbaru dari data reactive.

function render() {
  document.querySelector("#nameInput").value = reactiveState.name;
  document.querySelector("#ageInput").value = reactiveState.age;
  document.querySelector("#display").innerText = 
    `Nama: ${reactiveState.name}, Umur: ${reactiveState.age}`;
}

Fungsi ini akan memanipulasi DOM agar selalu mencerminkan nilai terbaru dari data reactiveState.

Menambahkan Event Listener untuk Input Handling

Sekarang kita buat event listener agar setiap perubahan di input memperbarui data reactive.

document.querySelector("#nameInput").addEventListener("input", e => {
  reactiveState.name = e.target.value;
});

document.querySelector("#ageInput").addEventListener("input", e => {
  reactiveState.age = e.target.value;
});

Dengan ini, setiap kali pengguna mengetik, data model akan ikut berubah — dan render() otomatis memperbarui tampilan lain yang bergantung pada data tersebut.

Struktur HTML

Berikut contoh sederhana tampilan form dan area output-nya:

<div>
  <label>Nama:</label>
  <input type="text" id="nameInput">
</div>
<div>
  <label>Umur:</label>
  <input type="number" id="ageInput">
</div>
<hr>
<div id="display"></div>

<script src="binding.js"></script>

Hasilnya

Sekarang, jika kamu mengetik di kolom nama atau umur, tampilan teks di bawahnya akan langsung berubah tanpa reload atau klik tombol apa pun. Sebaliknya, jika kamu mengubah nilai reactiveState.name = "Jane";, input dan tampilan juga ikut berubah otomatis.

Mengembangkan Lebih Lanjut

Setelah memahami konsep two-way data binding di JavaScript, kamu bisa mengembangkannya menjadi sistem reaktif yang lebih kompleks:

• Tambahkan computed properties agar nilai tertentu otomatis dihitung dari data lain.

• Gunakan Reflect.set() untuk menangani update secara aman.

• Buat sistem dependency tracking agar hanya elemen yang relevan yang diperbarui.

• Integrasikan dengan template renderer agar bisa mengikat data ke teks atau atribut HTML.

Dengan kombinasi ini, kamu sudah berada di jalur untuk memahami dasar kerja framework modern seperti Vue atau React.

Kesimpulan

Membangun two-way data binding di JavaScript tidak harus menggunakan framework besar. Dengan memanfaatkan Proxy(), event listener, dan sedikit logika reaktif, kita bisa membuat sistem sederhana namun powerful. Pendekatan ini sangat ideal untuk belajar dasar reactive programming sebelum melangkah ke framework yang lebih kompleks.