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-en... [Read Full]
markdown guide
 

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?

 

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...

 
 

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

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

 

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

 
 

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

Very informative, thank you!

 
code of conduct - report abuse