Two-Way Data Binding with JavaScript (NO FRAMEWORKS!)
HTML-код
- Опубликовано: 10 сен 2024
- Did you know you can easily create a two-way data binding between your view and your state using pure JavaScript, no libraries or frameworks required?
This technique allows you to build complex user interfaces with ease, and I'll be showing you how to do it in today's video - enjoy! 🙂
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript
If this comes as a surprise to you, and you've been developing using React, Angular, Vue or the likes, you need to realize this is the foundation of the stuff you've been using. It's probably a good idea to have a solid understanding of the underlying technologies (Javascript, DOM) before jumping into a framework.
Only angular
The possibilities of things that can be done with pure JavaScript are just fantastic!
Great video!
The only difference with two-way binding is - no render method call in a place where we keep the state. It means - if we use formState.name somewhere on a page (for example, render this text right under the input field) - it will not be changed automatically after we enter something in the input. It is an important part of two-way binding...
what's wrong with attaching it to a 'keyup' event listener and having it mirror the input that way
Nice, would love to see more content like this about how these fancy features in frameworks can be implemented in vanilla JS. Thanks Dom 👍🏽
The fact that he did it without any framework
Is Blowing🤯
Another cool tutorial.
So clear and so useful, thanks!
Thanks
good stuff. thx
It is awesome! But it seems like it is a a one-way data-binding but not two-way, in my opinion, two way should be that we can change A through chaning B, and chang B through chaning A, you showed that we can set and get A and make the B change accordingly, but not vise-versa.
Great !
Very useful, and quite simple
Great.
Great video, thanks
Great content, great channel! Thank you very much! :)
Thanks for share.
You're welcome I hoped it helped
Nice. One thing - so your implementation is not tied to the name of the nameInput variable's name you might want to use this.value instead of nameInput.value inside your get() and set() methods. ;-)
If you just made another h1 element for example and render dynamically the value from the input into h1 would have been even better. event listener for keyup or input and in the set method just set the h1 element innertext to the value.
Sir please create some videos on creating own javascript framework like nextjs with cdn file
Good video and it was exactly what I was looking for.
One criticism though... at 4:28 you implemented the get() method as "return 45" and then as "return Math.random()", before finally settling on "return nameInput.value".
I think the video would have been better if you went directly to "return nameInput.value". Showing the other two implementations was slightly confusing.
I'm sure there are cases where an alternative implementation would make sense, but I'd recommend showing them _after_ showing the straightforward / typical case.
@dcode Hello, Dom. Please please please, make the video on how to add cards that are hidden to the ones already shown, but three (because so many were originally shown) and then the "show more" button or hide how all cards will be loaded, or change the button name to " more less "and hide all the cards that were opened
I'd advise you to go take a JavaScript course and learn the fundamentals. Half way through the course you'd realize you can do a lot of what's on your mind simply by using DOM apis to manipulate your page. Else you'd be stuck in tutorial hell! 💀
That was surprisingly simple. Do you really need to invoke Object.defineProperty(...)? Can't you just declare the formObject along with the name property? Or would that prevent you from declaring the getter and setter?
When I tried it the name value would always return the value of the get method... even if I changed it later. I guess this is a way of keeping things private or maybe imutable?
while still being within reach of the global Window?
Thank you for the video,
Please, if you have multiple input elements on the page, do you have to create the “Object.defineProperty” for each of them.
Thank you
just use document.querySelectorAll and loop through them and do it the same way
@@bribes_for_nouns
Thank you for your response
its amazing but make with some realtime use cases.
in react there is NO two-way binding, in only in angular and vue
wow
This is *not* two-way data binding. It's one-way.
And it's well presented, but poorly written.
I was expecting a self-invoking function with a pre-scan, observers and actual multi-way binds.
Sadly, that isn't what is offered up here. :(
Shall we build our own Angular Framework?
🙏🙏🙏🖖🖖🖖🖖🖖🖖👍👍👍👍👍
it is ONE way data binding, not two way