Javascript Data Binding

Data binding adalah suatu teknik mengikat data dari provider ke konsumer, sehingga mereka dapat saling tersinkronisasi.

Dalam hal ini adalah sinkronisasi antara variabel javascript dengan suatu element HTML, lalu apabila variabel pengikatnya berubah maka user interface yang terikat dengannya juga ikut berubah secara otomatis.

Sebagai contoh, kita memiliki element input dan paragraf. Jika kita mengisi element input tersebut, maka akan terjadi perubahan pada element paragraf.

Ada begitu banyak framework atau library untuk memudahkan kita melakukan data binding. Misalnya react, vue dan angular.

Namun, di sini kita akan belajar bagaimana cara binding suatu element dan variabel menggunakan vanillajs atau tanpa framework.

HTML

Untuk pertama kali, kita hanya harus menuliskan beberapa kerangka web berupa kode html sederhana. Sebuah input, beberapa button dan juga tag span.

<input type="number" id="inputEl" value=''>
<span id="value"></span>
<button id="increment">Increment</button>
<button id="decrement">Decrement</button>

Javascript

Kemudian kita tulis kode utama yaitu javascript. Sementara itu, teman-teman boleh juga untuk menambahkan beberapa baris kode css untuk mempercantik website kalian.

State

Di section ini fokus kita adalah pembuatan kode utama untuk melakukan data binding, dengan memulai dengan membuat class State

class State {
    constructor(initialState, initialHook = null) {
        this.hook = initialHook
        this.state = initialState

        if(!!this.hook && this.hook instanceof Function) {
            this.hook(this.state)
        }
    }

    get getState() {
        console.log('getter is called')
        return this.state
    }

    set setState(param) {
        console.log('setter is called')
        this.state = param instanceof Function ? param(this.state) : param
        if(this.hook instanceof Function) this.hook(this.state)
    }

    set setHook(param) {
        if(param instanceof Function) return this.hook = param
    }
}

Mari kita kupas satu persatu.

Dalam constructornya, dilakukan inisialisasi beberapa object yaitu state dan hook.

Kemudian object state dan hook akan kita assign dengan parameter yang dilempar ke dalam constructornya, yaitu initial state dan initial hook.

Sementara object state berguna untuk menyimpan data yang akan di-binding/diikat dengan element HTML yang telah kita tulis sebelumnya, object hook akan memudahkan kita mengupdate ui/tags HTML yang telah terikat dengan object state.

Lalu kita menulis beberapa method setter dan getter yang mempermudah manipulasi object hook dan state di dalam classs.

Yang terpenting adalah method setState(param), di sanalah kita mengupdate object state dengan parameter baru yang telah dilempar sebelumnya. Lalu kita juga memanggil object this.hook yang berupa function, kemudian melempar object state yang telah diperbarui untuk kita gunakan nanti.

Instansiasi Class State

Di section kedua ini, kita akan mulai lakukan pengikatan data. Yang pertama adalah menyeleksi DOM dan mengambil tag apa yang kita butuhkan.

const valueEl = document.getElementById('value')
const inputEl = document.getElementById('inputEl')
const incrementEl = document.getElementById('increment')
const decrementEl = document.getElementById('decrement')

Kemudian kita buat function untuk melakukan perubahan UI apabila data telah berubah, untuk kemudian function ini akan dilempar ke dalam constructor yang telah dibuat sebelumnya.

const updateElement = (value) => {
    valueEl.innerText = value
    inputEl.value = value
}

Akhirnya di sinilah class State yang kita buat sebelumnya akan berguna, dengan initial state yaitu 0 dan juga initial hook yang berupa function.

const state = new State(
    0, //initial state
    (initialState) => updateElement(initialState) //initial hook
)

Jangan lupa pula untuk mengupdate hook apabila initialHook dan hook yang selanjutnya akan berbeda. Temen-temen boleh untuk melewatkan cara ini apabila initialHook dan hook selanjutnya sama persis.

state.setHook = (state) => updateElement(state)

Event Handling

Untuk section yang terakhir, kita hanya melakukan beberapa event handling untuk tag button dan input, kemudian kita update state atau variabel pengikat.

inputEl.addEventListener('change', e => {
    state.setState = (prev) => {
        if(!e.target.value) return prev
        if(e.target.value < 0) return 0
        return Number(e.target.value)
    }
})

inputEl.addEventListener('keyup', e => {
    state.setState = (prev) => {
        if(!e.target.value) return prev
        if(e.target.value < 0) return 0
        return Number(e.target.value)
    }
})

incrementEl.addEventListener('click', e => {
    state.setState = (prev) => Number(prev) + 1
})

decrementEl.addEventListener('click', () => {
    state.setState = (prev) => {
        if(prev > 0) return Number(prev) - 1
        return prev
    }
})

Full Kode

Temen-temen bisa mendapatkan full source codenya di repo github saya.

Jangan lupa kasih star yaa, biar mimin makin semangat buat artikel selanjutnya >//<

Akhir Kata

Bagaimana tutorial kali ini temen-temen, tidak sesulit yang dibayangkan bukan?

Terimakasih telah menyimak artikel ini hingga bagian akhir, terimaksih ….