Svelte Tutorial for Beginners #4 - User Input & Data Binding

Key Takeaways

or rather than so in the last video we saw how we could react to a user clicking on this button by using this on click event right here and then we set that equal to a function reference handle click that runs this function when the click occurs and it changes the belt call of value to orange we can see that over here if I click on this it changes from black to orange so that's cool but what if I want to allow the user to type into an input and let them choose their own color and as they type it changes the value right here well we could do that so first of all let's create this input of type text I'm going to save that and what I'd like to do is when you user types in yellow for example then this updates to yellow as they are typing so in essence we need to dynamically change this on-the-fly every time a user types into this so what we can do is react to an input event much like we reacted to a click event right here an input event is whenever a user type something in here so that is an input event that's an input event space is an input event anything that a user types in there is an input event so to do that I could say on and then input and set that equal to some kind of function as well so let's call this one handle inputs and by the way we don't invoke these functions like this because that would invoke the function at run time it would look through the code and invoke it straight away without doing that we're passing through function references and that way they're only ever invoked when this event occurs so let's now create that function so I'm going to say Const handle inputs and by the way you can call the functions whatever you want you don't have to call them a handle click or handle input call them what you want and I'm going to set this equal to an arrow function again and inside this time what I'd like to do is take whatever the value is of this input and assign it to this right here so how do we get that value well when something like this occurs some kind of event whether it be input or click the function can automatically take the event per Peter now we don't need it in this top once so I'm going to delete it from here but in this one we are going to use the event parameter and on this we can access the target element so where the event occurred and the target element would be this thing right here the input and on that we can access the value property which is what's actually in the input the text that they have input to it so I'm going to say Const or rather bell color we don't need another Const bell color is equal to e target dots value so events target which is the input dot value which is the value inside the input so every time they input a letter this is going to run and it's going to grab the current value and it's going to update belt color up here with that value so it should update on the screen in real time right here so if we save that and test it out cross our fingers currently it's black belt and if I start to type in yellow we can see it changing up here as I type which is awesome okay so that's cool so now what we're doing is we're binding whatever the value is in here to this but it's only one way binding at the minute if it was to change up here it wouldn't update down here and I can demo that by clicking this because that changes it to orange but it then doesn't reflect that change down here so this is one way binding at the minute but we can turn this into two-way binding if we want to so that whatever this change is this updates to reflect that as well so they're always in sync with each other so to do that we could come down here and we could use the value property and set it equal to whatever this thing is belt color right here and then whenever this changes without was inputting anything this value will be updated to reflect that so if I save it and come back over here we can see automatically that it's placed black inside here because we have that two-way binding going on now because this is black and the value is set to this value now if I change this to yellow it still works if I update the belt color here to orange it updates here but also because now the value of this input field is set to that variable the belt color now we're updates in here as well so that is two-way binding in action we have this binding where we're updating the variable based on what I user types in and we have this binding backwards where we're setting the value equal to whatever this thing is right here two ways now there is a shorthand way of doing this and I'm going to show you that so if you want one way binding you can just use either of these if you want to way binding you can use a shortcut and that is to say input and then this time it's going to be of type text but this time we'll say bind so this right here is a spelt keyword and we're going to bind the value of this import to the belt color that makes sense doesn't it and that does both of these things under the hood two-way binding so whenever we type into it it updates the value over here and if this changes elsewhere it's going to update the value of this input to reflect that so if I save that and come back over here we can see we still have black and black if I change this to red it's going to update in both places if I update the belt color to orange it updates in both places now in cases where you only need one weight data binding definitely use this method either this all this but if you do need to way data binding use this instead now as well as hooking up our data with inputs we can also hook it up with other attributes and other elements as well so for example I could come to the paragraph tag where we output the belt color and I could say that the style is equal to and the color is going to be something and I can output a dynamic value here and it's going to be the belt color so as this updates over here it's going to also update in the style attribute as well so if this is black then the style is going to say color black and it's going to call this text black if it's orange it's going to color the text orange and so forth so if I save that and come over here we can see this is black text if I change this to red then we get red text if I change this to blue blue text and if we update it over here to orange we get orange text