DEV Community

Discussion on: Two-way data binding in vanilla JS (POC)

Collapse
sushilkundu143 profile image
Sushil Kundu • Edited on

Yes. You are right. Here is the updated code.

const createState = (state) => {
return new Proxy(state, {
set(target, property, value) {
target[property] = value; // default set behaviour
render(property); // updates the view every time the state changes
return true;
}
});
};

const state = createState({
name: '',
title: ''
});

const render = (property) => {
document.querySelector([data-model=${property}]).value = state[property];
};

const listener = (event) => {
const {type, value, dataset} = event.target;
state[dataset.model] = value;
};

document.querySelector('[data-model="name"]').addEventListener('keyup', listener);

document.querySelector('[data-model="title"]').addEventListener('keyup', listener);