DEV Community

Two-way data binding in vanilla JS (POC)

Francesco Esposito on February 02, 2019

As Front-end Engineers we mostly use libraries and/or frameworks to develop and maintain complex web apps, but what there is under the hood? Do you...

Read full post

Tormod Vold Mikkelsen • Nov 15 '19

Very helpful! Thanks a lot. :)
You have a typo in there:

    const state = createState({
      name = 'Francesco'
      title = 'Front-end Engineer'
    });

Should be

    const state = createState({
      name: 'Francesco',
      title: 'Front-end Engineer'
    });

Anuj jaryal • Oct 9 '21

How extend it to include array of elements, like
I have in DOM:

< input name=product[1][quantity]>
and so on...

Francesco Esposito • Nov 10 '21

I would say that this is mostly a Proof of concept to show a possible implementation of two-way data binding, but for an app I would advice you to use a library (e.g. React)

Brian • Apr 4 '20

Thanks for the article. How would you expand on this?
Unless I am understanding it wrong, It looks like the render function updates everything that has a binding. Would you make it so that it only updates the bindings that had changes?

Sushil Kundu • Jun 8 '20 • Edited

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

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);