2.3 Handling Events and Iterating Over Collections

In this lesson, we are going to create a component that will display a list of things, but this is going to be a manual list. We will have a form that we will type into. We will click on a button and that will add whatever we typed into an array, which will then be displayed in our components. So there's several different topics that we're going to cover in this lesson. So let's go ahead and jump right in. Let's create a new file and let's call this ManualList. And of course it needs to be. Let's start with our form. Now, this is going to be a very simple form, we don't really need a whole lot of stuff here. So let's have a field for whatever it is that we're going to add and I'm just going to say that we're going to add guitar names because I love guitars. So, we will have our input elements the type is text, that's fine. Let's go ahead and set up the binding. And we want to bind the value to let's call this variable guitarInput so that we will have that. And let's go ahead and create our script element so that we can declare this variable and let's initialize that as an empty string. Let's also go ahead and create our array that's going to contain all of our guitars so that we have that in place. And then, let's create our button element, that is simply going to say, Add Guitar, and there we go. So, we have this component, we can at least see it if we wanted to. So let's go to our app component and let's import this. So we'll call it ManualList, and the name really doesn't matter, but I'm just keeping it in line with whatever the name of the file is. You can call it whatever you want. I'm going to comment out the HelloForm so that all we have on screen is our list. So if we go and look at the browser, that's what we have. All right, so there's a couple of things that we need to do whenever we click on this button. First of all, we need to grab the data from the input field which we already have. Thanks to the binding to guitarInput, so that's not that big of a deal. But we also need to prevent the default action from occurring because if we click on this, it's going to submit the form. So we of course want to prevent that from occurring. So, we want to set up a click event listener. And with a DOM levels zero event handlers, it would look like this onclick. And then we will have our function name so we could just call that Add Guitar. Well, what we have in Svelte is not too far from this. We start with on followed by a colon, and then the name of the event that we want to handle. In this case, that's going to be click, and then instead of using a string value for the name of the function, we're surrounded with a pair of curly braces, and that's it. We have just set up a click event handler. So of course, we need to define that function. And that's going to work but that doesn't prevent the default action from occurring. Now, of course, yes, inside of our function, we could call e.prevent default, but we have a declarative way of going about that. So after we specify the name of the event, we have a pipe character, and then we have a modifier. So in this case, preventDefault, if we wanted to stopPropagation would say stopPropagation. I think I spelt that correctly, it looks like I did. But in this case, all we want is preventDefault. So there we go, that's going to prevent the default action from occurring. So if we wanted to go ahead and check that, we could click on this, we can see that the page is not being reloaded. So we are successfully preventing the default action from occurring. All right, so we have our guitar inputs whenever we type into our input. So we should be able to just say guitars.push(guitarInput) and that should work. So now we need to iterate over our guitars, so that we can see that. So let's have an un-ordered list and the syntax for iterating is going to look like this. We start with a pair of curly braces followed by a pound sign. Then each, so this would be like a for each loop, for each guitars as guitar. I really don't like that syntax, I would prefer to say each guitar in guitars but you know that is what it is. And then we have the closing of the each. So unlike view, where we would have the actual for declaration inside of the element, we have this completely separate from the market. It's its own declaration, and then of course, anything that we define inside of this little block is going to be repeatedly executed. So in this case we have an li element and we want to display the guitar. So if we go back to the browser, let's just start typing some things. So there's a Les Paul and notice that we aren't seeing anything as far as our list is concerned. And if we look at the elements yes, we still have an empty on ordered list. So, even though we modified the guitars array by pushing an new value into it, Svelte is not updating the DOM. And that's very different from other frameworks. Because other frameworks are observing the guitars and any time that it changes, either by adding an item, or removing an item, or just completely resetting the array. Well, those other frameworks would update the DOM. So in Svelte, we trigger an update or trigger reactivity with an assignment. So here's all we have to do, guitars = guitars, and then that's going to work. So if we come back and we type in Les Paul. That is added if we type Vela, if we type Strat, and so on and so forth, that's going to work. Now this is I'm not going to say ugly. I mean it's very clear as to what we're doing. We are pushing a new value and then resetting but there's a slightly more idiomatic way of doing that. And that is to simply assign a new value to guitars which is going to be an array. We will use the spread operator to spread out the current elements inside of guitars and then we will add in the new guitarInput. And that is going to give us the same results, but in one line of code as opposed to two. So now, if we come back Les Paul, Vela, and so on. So now, I want to focus on the user experience because notice that whenever I type in something and press Enter. Yes that item is added to the list but the value still remains inside of our input elements. So, all I want to do now, let's say guitarInput = and empty string and that's going to reset the value. So whenever we press Enter, the input element is ready for us to add a new item. However, whenever we click on the button, we take focus away from the input element. And yes, that is by design, as far as the user interface is concerned. However, I want the focus to go back to the input element. So then we need to grab this DOM node so that we can refer to it and call the focus method. And we can do that very easily by binding it to a variable. And we do that with the bind directive once again and in this case we say this. And then we set that to whatever variable that we want to use. So we can call this inputElement if we wanted to. And then we just need to declare it down here. We don't want to assign it to anything. We just want to declare it, that's going to give us the ability to then use this to refer to our inputElement objects. So now, we will reassign our guitars, we will reset the input. And then we will focus the inputElement. And now, we will have a working components here. So once again, we can type in a few things. And whenever we click on the Add Guitar, the inputElement is given focus and we can go back to adding more items. All right, so in this lesson you learned essentially three things. First, you learned how to set up event handlers. We basically use a DOM level zero approach except that we have on colon and then the name of the event. And if we need to modify that event in some way, like preventing the default action from occurring, we have a pipe followed by that modifier. You also learned how to iterate over an array, or a collection of things, using the each directive. And you also learned how to bind a variable to a DOM node, so that you can refer to that inside of your JavaScript.