Episodes
01. Introduction
47s
0%
02. Installing and x-data
3m 57s
0%
03. Visibility
5m 21s
0%
04. Model
7m 9s
0%
05. Project - Image finder
6m 35s
0%
06. More inputs
10m 25s
0%
07. Attribute binding
7m 46s
0%
08. Attribute binding examples
13m 22s
0%
09. Text and HTML
3m 3s
0%
10. Project - Markdown parser
3m 53s
0%
11. Looping
10m 59s
0%
12. x-show vs x-if
5m 57s
0%
13. Event handling
12m 2s
0%
14. Project - Modal with custom events
10m 35s
0%
15. $el
4m 45s
0%
16. Watching
5m 13s
0%
17. Project - Hackernews search
8m 10s
0%
18. Refs
7m 45s
0%
19. Cloak
2m 46s
0%
Transcript
00:00
We're now going to take a look at watching, which allows us to watch when a property within an Alpine component changes. So let's take a look at a contrived example here. Let's go ahead and initialize this with some data and let's just pull this down so we can create some methods out. We're going to need an XInit method or an init method in here to get this to work.
00:21
So within our data, let's just say that we had a message in here. Just keep this really simple to start with. And then let's go and create out an init method, which, as we've seen through the rest of the series, will run when this component initializes. Let's just add some content in there just to see this working.
00:39
So if we come over, give that a refresh, sure enough, we get ABC logged out. Now, what we can do within init is we can watch for this message being changed. At the moment, it probably won't make much sense. But in a moment, we're going to look at a more practical example of watching for a query change and performing a search.
00:57
So to watch something, we're going to go ahead and use watch. The first argument is the property that we want to watch, which in this case is just message. The second is the callback of what we want to do when this property changes. Let's go ahead and just console log out something and let's say changed.
01:15
OK, so what we can do is either add a button in here to change this message. So let's just say change message and let's add an on click handler. And let's just set the message to something else like so. OK, so let's get rid of the watcher for now just to see that message change.
01:36
And we could probably go ahead and do without putting that just in here with X text. There we go. And let's have a look. There we go. That changes. Let's bring that watcher back and let's see what happens. There we go. So we get changed. Now when we do call this callback,
01:54
this actually gives us the value of the item that's been changed. So we could say changed and also log out the value as well. Let's go ahead and do that. And you can see changed and that's to something else. So if you needed that value, you could go ahead and grab it from there as well.
02:09
Now that's the basics of watching. But let's look at an example of where we might want to practically use watching. Of course, it could be used for absolutely anything. But we're going to do this in the context of a search.
02:22
In the next episode, we're actually going to bring this together and do a full search on some kind of API. So let's go ahead and output our X data here. And inside of here, we're going to have a query which we can update via an input.
02:39
And we can use X model for this. So let's hook that up to the query. And in here, we might have some kind of perform search method. So let's go ahead and collect up some results. And for now, we're not actually hitting an API.
02:56
So I'm just going to manually set these results to a couple of things in an array. Apple, banana, and grapes. That'll do. Okay, so when we go ahead and start typing, that is when we want to perform the search. We want this to be like an instant search.
03:15
So let's go ahead and just really roughly output the results. We're not actually going to iterate through them. So let's say results. And let's go over and give that a refresh. So when I start typing in here, I want the search to perform instantly.
03:29
Our first instinct might be to say X on key down or key up. And then go ahead and perform the search. Let's actually use key up here. So let's go over and give this a refresh. When I start typing, we get the results back.
03:43
And of course, in reality, this would actually hit some sort of API to bring back the results, set them here. And then of course, what we would do is iterate through them. Now, this is absolutely fine for most instances. But what we ideally want to do is only perform a search when the query is updated, not on key up or key down.
04:04
If we had multiple inputs, for example, or we had other event handlers on here that we needed to use for key up and key down, this is a little bit too tightly coupled to performing the search. So what we're going to do instead is bring back our init method. And we're going to go ahead and watch the query.
04:22
And when that changes, then we're going to perform the search. So it's completely independent to what's being hooked up to that model. So let's go ahead and say this watch. Let's watch the query. And then we know that inside of the callback that we get here, we get the actual query.
04:39
And then we can go ahead and perform the search. And to perform the search, we might want to take in a query to actually send through to our API. So let's go ahead and say perform search query. And that will have exactly the same effect.
04:52
But now we've decoupled it from the key up or key down event on that input. If we go over and start to search again, you can see it works in exactly the same way. Let's head over to the next episode and look at a practical example of actually creating a real drop-down search, which allows us to perform a search based on a public API.
19 episodes•2 hrs 10 mins•2 years ago
Overview
Alpine.js is a refreshingly minimal JavaScript framework that gives you the reactive nature of Vue and React, but with much more simplicity. This course will get you up to speed on how to use it, with plenty of practical examples along the way.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.