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...
For further actions, you may consider blocking this person and/or reporting abuse
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.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...
Gotcha. Thanks
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
Ah, ok 🙂
eventually, I followed your advice 😉
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
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.
I found it actually
developer.mozilla.org/en-US/docs/W...
It is the Proxy Handler
I love the simplicity of this. I would never have guessed that it would be so simple!
Very informative, thank you!
Good, what is POC?
Proof Of Concept :)
Proof of Concept 🙂
Does React use Proxys under the hood?
No, it would be too slow., that is only a proof of concept, it is not for production code.