This course has been updated! We now recommend you take the Svelte Fundamentals course.
Transcript from the "Input & Template Binding" Lesson
[00:00:00]
>> So now we're gonna move on to the binding section of the tutorial. And as a general rule, data flow, as we've seen, goes from parent component to child component. In other ways, it goes top-down. Sometimes we need to break that rule. Sometimes, we wanna get information from an element or component back up to its parent.
[00:00:17] And this is very common when we're dealing with form elements for example. So, here's an input element, Doesn't currently do anything. But what we want to happen is for the changes in that input element to be reflected in the state of the component. And there is one way that we could do this using events.
[00:00:38] We can do on input equals handle input and so on, and we could add an event handler and do all of the stuff that you would normally do, but it's a little bit inconvenient. Instead, in Svelte, we can just turn this prop, this attribute, into a binding with the bind directive.
[00:00:57] And that looks like this bind:value equals name. And now, whenever the value of the input changes, the value of the variable that's associated with it will also change. And that's bidirectional. So, if there are changes to that value from outside the input, they will also be reflected. Everything is kept in sync.
[00:01:26] And it's not just text inputs, it's also numeric inputs, which is not the case if you're dealing with the DOM natively. In normal DOM elements, the value is always a string. But generally, if you're dealing with a numeric input, which is type equals number or type equals range, then it's better to get that value expressed as a number.
[00:01:50] So again, we're going to turn these value attributes into bindings bind colon value, bind colon value. Same again here, and last one. And now, when we change these inputs, all of the different places that that's referenced also get changed. So this input corresponds to its counterpart on the left, and down here, the expression is also changing.
[00:02:18] This UI is a little bit broken because chrome just released a new version, and it has a slight bug, which will need to get fixed. So, that's why there's a gap on the range input there, it looks a little bit weird. We also have check box inputs, which represent a Boolean state.
[00:02:40] If the input is checked, the value is true. If the input is unchecked, the value is false. Then, for this we add bind colon checked, like so. And now, if I toggle this check box, then I'm able to subscribe to this newsletter. Sometimes, you'll have multiple check box inputs that all correspond to the same value.
[00:03:10] And for that we use a special thing called bind colon group. So, let's say we're building a website for selling ice cream. We've got let scoops up here. And we can choose between these different radio options, one scoop, two scoops or three scoops, and they're all mutually exclusive.
[00:03:37] We're gonna bind to that, oops, gonna bind to these groups like so. And then, as we interact with those radio buttons, it's being reflected in the order summary at the bottom of the page. Now, here we've got some slightly repetitive marker. We've got this label block repeated three times, once for each flavor on the menu, cookies and cream, mint choc chip and raspberry ripple.
[00:04:10] And it would be easier if we put that in an each block. So, we're gonna do that real quick. And then here, instead of repeating that each time, each menu as flavor. We're gonna get rid of the last two, indent the first one. Close the each block, and it's repeating cookies and cream because I haven't changed this value to flavor.
[00:05:10] Why isn't this working? It is working, but this is also, there we go, okay, panicked a bit there. So now, if I just made that bigger then. We can see that it's not, I mean, it's bigger, we can see that it's not actually changing the order because this isn't yet binding, it's just a regular variable.
[00:05:40] So, we're gonna turn this group into bind:group. And then, now this flavors array up here, which represents the selection that the user has made. Gets changed, and we need to, if we're gonna be greedy and have three scoops, we need to say Three scoops. And our order summary says we've ordered three scoops of cookies and cream, mint choc chip and raspberry riffle.
[00:06:06] And we can now add new flavors of ice cream. And it will get added to the menu as we'd expect. Similar to input, our text area elements, and these are useful when you need to enter a large amount of text. And we're going to use a text area to build a mark down here.
[00:06:33] It's exactly the same as an input, value becomes bind:value. And so now, I can add a list of things, right? That's a mark down editor and 12 lines of code. Now, in the same way that we saw earlier with the image source equals source, we can turn that into just putting the source inside the curly braces.
[00:07:05] We can do a similar thing with bind value. We can get rid of the equals value because it's implicit when you just have bind value by itself. It still works. We can also use bind value with select elements which are drop down menus. On line 24, where we have a select element inside our form, and you can see it here.
[00:07:45] We're going to change this value equals selected to a binding, same drill as before. And now, when we select a different item inside the drop down. We can see at the bottom that we've selected question, one, two or three. That's true even though the values of these options are not strings, which is what you would need to do if you were using regular HTML.
[00:08:20] We can actually pass objects to the options, and they will be preserved faithfully. So here, these are the options. They've got an ID property and a text property. The text is what is visible inside the option because we have questions.txt, but further down, when we're shown which question was selected, we're showing selected.id.
[00:08:52] If we revisit our ice cream example from earlier, we can replace the check box list with a select multiple. So, we've got our each block where we're showing three labels, each containing a check box input. And we're going to replace that whole block with a select element. We're going to give it the multiple attribute, which means that it will be visible at once.
[00:09:21] Bind value equals flavors, which is the variable containing our selection. And then we're just going to iterate over the menu. And print the text. So now, we can order our ice cream. Another fun thing we combine to is a content editable content. So, when you have a content editable, then it means that user can actually change what's in the page.
[00:10:22] So, I can add some text like hello, everyone, this is some text, and copy that to the clipboard. And then, now if I add to that elements innerHTML. And paste it in, then you'll see that it's capturing the HTML contents and letting us use that in another context.
[00:10:53] There aren't many situations where that's useful, but it does sometimes come up. And as we've seen, we can bind to prooerties inside in each block, it's not just top level elements. So, here we have a to do list with a check box input and a text input. And we want to be able to see how many of these are remaining.
[00:11:22] Currently, all three are remaining because these check boxes aren't wired up. So, find the mark up where this is happening. And we're gonna turn this check value into a binding. And we're gonna change that to binding as well. And now, when you click that, it's actually changing the value of to do's itself, and because of that.
[00:11:54] This remaining value, which is being derived from the value of to dos automatically updates. And so this text. Gets printed down here, and it will automatically update when we interact with the items inside the each block.