DEV Community

Cover image for One-way data binding in vanilla JS (POC)

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...
Collapse
 
berslucas profile image
Lucas Bersier • 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];
};
Enter fullscreen mode Exit fullscreen mode
    <div data-binding="quote1"></div>
    <div data-binding="quote2"></div>
Enter fullscreen mode Exit fullscreen mode
state.quote1 = 'hello';
state.quote2 = 'world';
Enter fullscreen mode Exit fullscreen mode

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?

Collapse
 
phoinixi profile image
Francesco Esposito • 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...

Collapse
 
berslucas profile image
Lucas Bersier

Gotcha. Thanks

Collapse
 
link2twenty profile image
Andrew Bone

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

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

Collapse
 
phoinixi profile image
Francesco Esposito

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

Collapse
 
link2twenty profile image
Andrew Bone

Ah, ok 🙂

Thread Thread
 
phoinixi profile image
Francesco Esposito

eventually, I followed your advice 😉

Thread Thread
 
briancodes profile image
Brian • 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

Collapse
 
shivanisdev profile image
Shivani Sehdev

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.

Collapse
 
shivanisdev profile image
Shivani Sehdev

I found it actually
developer.mozilla.org/en-US/docs/W...
It is the Proxy Handler

Collapse
 
megazear7 profile image
megazear7

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

Very informative, thank you!

Collapse
 
chenge profile image
chenge

Good, what is POC?

Collapse
 
phoinixi profile image
Francesco Esposito

Proof Of Concept :)

Collapse
 
frgarciames profile image
frgarciames

Proof of Concept 🙂

Collapse
 
antoineweber profile image
Antoine Weber

Does React use Proxys under the hood?

Collapse
 
phoinixi profile image
Francesco Esposito

No, it would be too slow., that is only a proof of concept, it is not for production code.