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've been using X show a lot throughout the course but we also have access to X if which pretty much does the same thing but there's a slight difference. Let's take a look not only how this works now but also when you might want to reach for X if. Let's start with a simple example of X show as we have already seen a few times before
00:21
and let's set show to false within X data and let's create a div out here and say X show, show am I visible and of course the answer in this case is no. Now if we would set that to true we know that that's going to show it and of course if we introduced a button here to toggle this that would also work as well.
00:42
Let's do that now and then we can roll on to the next example of looking at X if. So we're going to say X on click show equals true and I'm going to say show me. Let's go over there we go pretty straightforward we've already seen this before. So let's copy this component that we've already got,
01:01
pull this down here and switch this over to use X if instead. So for this let's just pull this down below the button. Let's create a template around here because we're going to need to use a template for X if and we'll see why that is and let's change this to X if show
01:20
and then let's just output the div in here. Let's go over give that a refresh you can see it works in exactly the same way. So the question is why would we want to use or when would we want to use X if instead of X show? Well the short answer is if what you are doing inside of the condition,
01:39
so if the condition means that whatever you're doing is more intensive, for example you might be performing some kind of calculation once this is toggled then you would want to use X if. So this isn't actually run beforehand.
01:56
Now that might seem a little bit complex so let's take a look at a practical example of this. So I'm going to go ahead and get rid of this and let's come down duplicate this down here. So I'm going to go ahead and say show users. Let's just say inside of X data we had a list of users that we wanted to perhaps sort.
02:17
So I'm going to go and switch this over to users and we're going to have an array of people in here. Kind of like the example we looked at before where we had a name and then we had some points. So let's say that we brought back the example of ordering these users by their points. So let's say Billy and set that to 100.
02:42
We'll just leave it at 2 for now because the actual data itself doesn't matter too much. So let's go and say users ordered by points. And let's make this a getter and let's return this user's sort. Bring in our sort enclosure and then say b.points minus a.points.
03:07
That's going to order them by points in descending order. Now inside of here let's switch this over to an X show and say show. And then let's iterate through these. So say template and X for user in users and let's just make this really simple.
03:30
Let's just output the user's name in here. User name and let's have a look at this. Okay. We've got show is not defined so let's just bring that back again.
03:45
And we're going to change this to there we go. So what that has now done is when we click on it it's showing them users ordered by their points. Let's just actually bring the points in here as well. Change this to a span just so we get a good idea of this.
04:00
I promise there is a conclusion coming here in a minute. So let's say points and let's wrap this in a div real quick. And let's come over and there we go. We've got Billy with 100 points and Alex with 10.
04:17
So the point of this is if I go ahead now and switch this over to user's order by points, what that's actually doing is it's always running this. So we can prove that by console logging sort. Now this isn't very complex so there's nothing wrong with doing this initially on the page,
04:36
but that's always going to be run. You can see it's run here twice. Now the difference between x show and x if is if we were to create a template out in here and then ended that template down here and said x if show.
04:55
Now let's look at what happened when we initially land on the page. We only see this called once. We can get away with this not being called once by making this a method. So let's change that over to a pure method and there we go.
05:07
It's not called at all. Now when I click show users it's called. So let's keep it as a function rather than a getter because that's always going to be called. And there we go.
05:17
So if again we change this back to a div and then set x show to show, that's always going to be called because it's being rendered just not shown. But if it's x if that's conditional render. So it won't be called until we ask for it.
05:33
Hopefully that makes sense. It's a bit of a long-winded way of explaining that, but that's really the usage for x if. If you've got something happening inside somewhere that you want to only be run
05:45
like this ordering of the users by points, once the thing has been shown or the condition has been met, then that's what you want to use. That's the difference between x if and x show.
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.