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.
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...
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
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?
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.
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.
@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! 💀
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. ;-)
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. :(
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!
Another cool tutorial.
So clear and so useful, thanks!
good stuff. thx
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 👍🏽
Great video, thanks
Very useful, and quite simple
Thanks for share.
You're welcome I hoped it helped
Great.
Great content, great channel! Thank you very much! :)
The fact that he did it without any framework
Is Blowing🤯
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
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?
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.
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.
@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! 💀
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. ;-)
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?
Sir please create some videos on creating own javascript framework like nextjs with cdn file
in react there is NO two-way binding, in only in angular and vue
its amazing but make with some realtime use cases.
wow
🙏🙏🙏🖖🖖🖖🖖🖖🖖👍👍👍👍👍
it is ONE way data binding, not two way