Bindings

[00:00:00]
>> Okay, let's talk about bindings. So as we've seen, it is a general rule in svelte data kind of flows from the top down into your components. So a parent component can set props on a child component and a component can set attributes on an element but not the other way around.

[00:00:20]
Sometimes it's useful to break that rule, so take this input element. Now, we could use an event handler here. We could add on input equals blah, then we would have an event handler and then we would set the name from the value of the input, it gets very boilerplate-y very quickly.

[00:00:46]
We can get rid of all of that and just bind the value to the name. All right, so now when I change the text in here. It's gonna keep the value of the input and the value of that variable in sync. And we can do this with all different kinds of inputs, that was a text input, which is the default type but you can use it with numeric inputs as well.

[00:01:17]
And because Svelte understands the input is numeric, it will turn the string value that you get from the DOM, because of course, into a number that you can actually work with. So in here, in our app.svelte, right now there's no binding, so these aren't doing anything when we edit them.

[00:01:37]
We'll turn all of these values into bindings by just selecting them all. Select one, command-D, command-D, command-D and then stick a bind in front, right, and now they are all linked. So I can change that value, and not only is the other input updating, but the paragraph below, the labels is also updating.

[00:02:00]
And you can think about how much work and faffing around you have had to do, if you're using event handlers instead of bindings to achieve that. We can use it with check box inputs too. This time, instead of binding to the value of the check box, we're gonna bind to the checked property, because that's what the DOM gives us.

[00:02:23]
So inside here, that checked attribute, we're gonna bind it. And now, we can interact with the application. We're binding the yes value to the check state of the input, and when yes is true, we show this markup instead of this markup. And it's not just input elements, we can also use this with select elements.

[00:02:54]
Here we've got an array of questions that are going inside this select element here and we have a selected value which is currently undefined. And then further down, we have an input which is binding the value to the, sorry, binding the answer to each of those questions to our answer variable.

[00:03:22]
And once the answer has been populated, we're allowed to submit the form So again, we take the value attribute on the Select, just like with an input, and we put bind in front of it And it's now bound the currently selected option to the question which we can see at the bottom here.

[00:03:51]
Where it says selected question one that corresponds to this piece of markup down here. So the selected value is now getting populated whenever we interact with that select element. Okay. We can also bind multiple inputs using the same value. So common thing that you'll have when you're dealing with forms is that you will have multiple radio or checkbox inputs that relate to the same value.

[00:04:31]
And for these we can use something called a group binding along with the value attribute to keep them all in sync with the state inside your component. So radio inputs you'll recall, they are the circular ones that are all mutually exclusive if they have the same name, checkbox inputs form an array of values because they are not mutually exclusive.

[00:04:53]
So let's take the radio inputs first, these are the radio inputs. When you're ordering ice cream from ice cream app you can choose one scoop or two scoop or three scoops but you cannot choose both one scoop and two scoops that wouldn't make any sense. So that's a radio input which has a name.

[00:05:13]
I'm keeping them mutually exclusive and we'll add bind group equals scoops. And now, when we interact with that, we are updating the value of the scoops variable inside our component. But before we can order our ice cream, we need to pick some flavors, as well. So down where the checkbox input is, we're gonna use another binding And this time the value that we're binding to is an array because we can select multiple flavors, that's why we're using a checkbox input rather than a radio input.

[00:06:07]
So if I want one scoop of cookies and cream, it will show my order at the bottom. If I try and order more flavors than scoops, then we've got an F block which is gonna tell us that's not possible. And again, bindings make this really easy, if you were using the event handlers for this then you would have to express all that logic in a more complex fashion.

[00:06:30]
We can use checkbox inputs if you wanna select multiple values, but another option that we have is a select element with the multiple attribute. So back down, down here where we have our checkbox inputs, we can use a select element instead. Okay, so we're gonna replace this array of check box inputs with a single select element.

[00:06:54]
I'm gonna put it outside the each. And we're gonna, again, bind its value to the flavors array. Close the select element after the each, and then inside here, we're just gonna have an option. The name of it is flavor, so we need to call it that. When you see the effects of this piece of markup down here.

[00:07:35]
We can select multiple things by pressing the command key and selecting them or I think if you press the Shift key you can select a whole bunch at once. And we don't need to declare the value on the option because it's just a string. So in the case where the value is just a string, it will take the value from inside the option.

[00:08:08]
We can also use bindings with text area elements. A text area is just kinda like a big chunky text input. So as with a regular text input, we're gonna replace this value with bind:value={value}. And now when I change some text inside the input text area. It's gonna reflect that in the value variable, which is then getting turned into markdown using this marked library from NPM and the HTML tag.

[00:08:52]
Again, you don't use this with untrusted input, but if it's within the user's own browser and we're using their data, then it's totally fine. We have a shorthand property here because we're doing bind column value equals value, and we're repeating the value there. We're gonna just get rid of that last part and, it will continue to work.