Custom Event Practice

[00:00:00]
>> What we're gonna do now is for your exercise, you'll notice that inside we have this ability to filter right as the user types. But the thing is this can be a little bit tricky because sometimes the user is not ready for you to filter and you're just Just immediately eliminating it.

[00:00:14]
So what I want you to do is inside of this, whether let's just do dishes to be consistent, I want you to hijack the event so that it only like updates and grabs the latest once you've hit Enter. Walk through the solution and then I might show you an easy way to do it.

[00:00:34]
So let's recap, so what we're trying to do here is inside of our dishes currently whatever we type it automatically filters which is nice on one hand. But on the other hand, let's actually make use of a user's intention about when they wanna filter in case they're trying to like look at something and reference it as they're typing to kind of make a guess.

[00:00:50]
So the way we're going to do this is start by actually breaking apart the V model that exists on the input element, and so that's happening all the way down here. So this filter text V model that's happening, we can basically say then is that we can break it up into the input, sorry, the value that we wanna rebind.

[00:01:09]
But then we have this input where we say, basically, let's call it update filter texts. All right, so this method for update filter text, let's define that up here, so cons, update, filter, text. Now we know a couple things, we know one, we're getting an event, but what kind of event are we getting?

[00:01:27]
We're getting an input event, and then what we do wanna then is we wanna check to see basically, can we actually see something specific about it? So let's go ahead and start just by making sure that the event actually triggers and fires. So we go back here and look at our console, we can see when we type, okay, this is good FTS, perfect.

[00:01:50]
But I'm kind of curious though, what if I swap this to be a keyboard event instead? If I swap that over, it looks like it's still cause it calling it as an input event, but let's see if this does anything for us. Because on the keyboard event, the nice thing is we get some other things that we know we get as far as like the code on the actual key event that's being pressed.

[00:02:13]
So the key event then we can also just say like this, and then that way when we go back, let's try this out, so there you go, it's undefined, that's interesting. So it looks like it's because at least at the moment, this input event really doesn't have it.

[00:02:26]
So we can't see, we can't fake it even though type three has been like, you're good. No, you're not really good, [LAUGH] clearly something is wrong. So we can't just arbitrarily change it, so we have our input event, and that's fine, and so once again, we can go ahead and say.

[00:02:42]
All right, so we have to event dot target as HTML input element, and then let's log that once again real quick. And then once we refresh, there we go, we have some stuff here going on, and then we can basically then grab the URL actually we don't want the value.

[00:03:00]
Well, we do want where we want this in this Second, so we do want we want to get the key somehow from this. It's kind of interesting that the key doesn't pop up, but okay, there we go is trusted, let's see, where's that data T? I mean, if we hit Enter what does that create for us?

[00:03:17]
Nothing, it's interesting Enter doesn't do anything for us, so whatever you want to do. So maybe actually the more so I'm sure there's a way you can dive in you can look into things, but this is where actually the input event might not actually be the right thing to be listening for on this.

[00:03:34]
In fact, and so this is a little bit of a gotcha that's kind of done intentionally what we might wanna do instead is actually do the key up event. And so if you haven't worked with view native events before it allows you to basically attach to any native JavaScript event.

[00:03:48]
And work with it and so on the key up event now let's see what exactly do we get from this. So you see key up has a keyboard event okay, this looks a little bit more interesting. So let's swap that over now to a keyboard event so that's really what we're looking for, and let's go ahead and see how if this changes anything.

[00:04:05]
So now, we can go ahead and let's go in here and be like, okay, wait, I'm an addition, is this correct? Look at the code, the magic code has appeared. So if I hit Enter, hey, it's appearing, so what we can do is we can say, well, if event dot code is equal to enter, then we shall do our thing where we do dish Wait new dish I believe new dish.

[00:04:31]
Wait am I end, wait I forgot we're filtering text we're not updating the new text. So we need to update its filter text, so filter text dot value is equal to let's see event dot target dot will let us do it, it does not. Okay, so now, we know once again this is a nation input element so we need to cast it, so let's go and cast it as an element then this gives us the value.

[00:04:57]
So now, we can try this out, ghost, a nothing's changing yet, but if I hit Enter everything filters, but that's not it. That's actually not the easiest way to do this, the easiest way to do this is we can actually delete all this and then we can actually attach a modifier to our events.

[00:05:21]
So this allows you to basically already bypass the key check. So if I save this now, and then go back here, you can see a little more Enter it refreshes, or while it filters. And so chaining events is a popular thing in view, and so something I want you all to know about.

[00:05:40]
Because for example, when you're doing a forum, how many of us have done forums where when we had to listen to a submit event, run event dot prevent default? Well, whenever you're building a view just do this, submit dot prevent your codes much cleaner, you don't have to worry about preventing the default event.

[00:05:56]
So definitely look into the event chaining going forward. There's a lot in there a lot more than what I've shown you. In fact, you can even write your own custom modifiers this whole thing you can customize. But I just wanted you to see the kind of syntactic sugar that view can provide for you that can make things just a lot easier.

[00:06:11]
But again, just to be clear, I wanted you all to scale it was like to get at the raw primitives of it in case you needed to get at that level. So there we go, that's how we would complete setting.