DEV Community

One-way data binding in vanilla JS (POC)

Francesco Esposito on January 25, 2019

Code and Demo Let's break it down in small pieces I assume you are already familiar with data-binding. Most of the modern front-end...

Read full post

Lucas Bersier • Jan 25 '19 • Edited

I like this, I didn't do anything with Proxies before.

One thing with this demo is that it will only update state.quote, with a few changes it can be generic and you can update multiple elements.

const createState = state => {
  return new Proxy(state, {
    set(target, property, value) {
      target[property] = value; 
      render(property);
    }
  });
};

const render = property => {
  document.querySelector(`[data-binding="${property}"]`).innerHTML = state[property];
};

    <div data-binding="quote1"></div>
    <div data-binding="quote2"></div>

state.quote1 = 'hello';
state.quote2 = 'world';

Also, I don't see any documentation for returning in the Proxy function. Is this just a code style thing or is return true useful for something in this case?

Francesco Esposito • Jan 25 '19 • Edited

Thanks Lucas for your comment, if you check out the code and demo (I should maybe include that in the post) you will see that it's more generic :)
return true is necessary, otherwise, you will get an error:

developer.mozilla.org/en-US/docs/W...

Lucas Bersier • Jan 25 '19

Gotcha. Thanks

Andrew Bone • Jan 25 '19

Just so you know you can embed stackblitz project right into your post with the following syntax 🙂

{% stackblitz one-way-data-binding %}

Francesco Esposito • Jan 25 '19

Hi Andrew, thanks! I did that initially but then I preferred the external link and to break down the concepts later in the article

Andrew Bone • Jan 25 '19

Ah, ok 🙂

Francesco Esposito • Jan 25 '19

eventually, I followed your advice 😉

Brian • Jun 28 '19 • Edited

The Stackblitz preview doesn't seem to run on mobile (Android Chrome)

I use StackBlitz on my own site, it's great on desktop, but causes some mobile browsers to crash. CodeSandbox has a light embed option which looks promising

megazear7 • Jan 25 '19

I love the simplicity of this. I would never have guessed that it would be so simple!

Very informative, thank you!

Shivani Sehdev • May 5 '20

I could not find anywhere how this set(argument1, argument2, argument3) works.
When I search for set function in javascript it takes me SETS.
I want to know, how every object has that set() method associated with it.