1
00:00:00,340 --> 00:00:05,090
This video and when to show you a few other things that we can do instead of an Ejaz File.

2
00:00:05,250 --> 00:00:09,460
Up until now all that we've seen is adding in regular HDMI.

3
00:00:10,170 --> 00:00:16,950
And then also using Ejaz tags to add in a single line of javascript that's using a variable that we're

4
00:00:16,950 --> 00:00:22,550
passing through from our app file using redstart render or passing thing vars through.

5
00:00:22,710 --> 00:00:26,560
But there are other things that we can and will do all the time using Aegeus.

6
00:00:26,970 --> 00:00:28,370
So we're going to talk about them here.

7
00:00:28,530 --> 00:00:34,260
I have three main objectives on a show you some examples in the real world of this control flow and

8
00:00:34,620 --> 00:00:39,480
templates and then I'm going to show you how we can write IF statements in each file and also how we

9
00:00:39,480 --> 00:00:41,620
can write loops and in each case file.

10
00:00:41,760 --> 00:00:44,280
Let me start by showing an example of what I'm talking about.

11
00:00:44,460 --> 00:00:45,830
So I have read it open.

12
00:00:45,900 --> 00:00:48,100
This is the soccer Sobran it.

13
00:00:48,150 --> 00:00:53,790
And what I want you to notice is that there's a list of posts twenty five on this page and each one

14
00:00:53,820 --> 00:00:56,830
follows a similar format except they're slightly different.

15
00:00:57,150 --> 00:00:59,830
Let's inspect and I'll show you what I mean.

16
00:00:59,940 --> 00:01:02,250
So they're all inside of a div.

17
00:01:02,250 --> 00:01:08,010
Each one is a div with the class of entry but they're slightly different in that some of them have a

18
00:01:08,010 --> 00:01:10,230
button here that shows it to video.

19
00:01:10,260 --> 00:01:16,080
They can play some of them show that it's a tweet and on some of the other ones I can also expand text

20
00:01:16,560 --> 00:01:23,310
so they follow this format where for each post we're getting we're getting a div with class entry and

21
00:01:23,310 --> 00:01:28,570
each one has a paragraph with Classical the title and another paragraph of the class equal with tagline

22
00:01:28,950 --> 00:01:30,610
and they follow a standardized format.

23
00:01:30,840 --> 00:01:31,860
But they're all different.

24
00:01:31,890 --> 00:01:34,260
And then obviously the content is different as well.

25
00:01:34,260 --> 00:01:38,200
The actual text the words the lengths all of that.

26
00:01:39,090 --> 00:01:44,670
So this is done with a template where we have a collection of posts and let's just say we were writing

27
00:01:44,670 --> 00:01:49,770
this we would get all of the soccer related posts from the database whatever order these are in.

28
00:01:49,770 --> 00:01:52,320
I think we're ranking them by hotness.

29
00:01:52,350 --> 00:01:54,000
However Reddit calculates that.

30
00:01:54,120 --> 00:02:00,450
So we have all these posts from the database and then what we do is loop through and for each post we

31
00:02:00,450 --> 00:02:02,450
make one of these items.

32
00:02:02,550 --> 00:02:05,180
So our Ejay file would look something like this.

33
00:02:05,190 --> 00:02:13,170
If I were to just write some pseudo code loop through all posts and then for each one what we want to

34
00:02:13,170 --> 00:02:18,550
do is make a post give or make an entry Div I think is what they called it.

35
00:02:18,990 --> 00:02:25,630
And that entry div should have a title and a tag line and whatever else goes along with it.

36
00:02:26,070 --> 00:02:28,500
And that will happen for every single post.

37
00:02:28,560 --> 00:02:30,790
So we'll just define a pattern for one post.

38
00:02:30,790 --> 00:02:36,390
But using the magic of Ejay guess we can get it to repeat for every item in a list or every item in

39
00:02:36,390 --> 00:02:37,590
our database.

40
00:02:37,590 --> 00:02:42,660
The other thing we can do is add in some conditional logic to make things look and behave a little differently

41
00:02:42,660 --> 00:02:43,130
.

42
00:02:43,290 --> 00:02:44,010
And so that's how.

43
00:02:44,010 --> 00:02:47,560
Here some of them have a play button for video.

44
00:02:47,580 --> 00:02:49,270
Some of them have a Twitter icon.

45
00:02:49,560 --> 00:02:52,030
Some of them will have a whistle here.

46
00:02:52,080 --> 00:02:55,190
Some of them have a soccer ball and some text that we can expand.

47
00:02:55,380 --> 00:02:56,950
And that's done with an if statement.

48
00:02:57,110 --> 00:03:03,060
Of course centrally the code says something like if this link is Twitter dot com then show a Twitter

49
00:03:03,060 --> 00:03:08,910
logo if this link is a video or a gif slash Jeff however you pronounce it.

50
00:03:09,270 --> 00:03:12,230
Then show the video icon and make this button work.

51
00:03:12,300 --> 00:03:16,500
And if the post is a match thread then show a soccer ball.

52
00:03:16,530 --> 00:03:21,700
That's just one example on one Web site of how having logic in your templates is really important.

53
00:03:21,870 --> 00:03:28,170
But any site out there any web application Facebook Gmail Twitter they all use it templating language

54
00:03:28,410 --> 00:03:30,020
though they don't all use Ejay us.

55
00:03:30,060 --> 00:03:34,800
There are tons and tons of different templating systems and languages out there but their core functionality

56
00:03:34,800 --> 00:03:36,060
is all the same.

57
00:03:36,060 --> 00:03:39,590
The idea again is that we can add logic to our HMO.

58
00:03:39,870 --> 00:03:44,610
So now let's go do that and get rid of this for now and let's go back to our app.

59
00:03:44,630 --> 00:03:45,550
Yes.

60
00:03:45,630 --> 00:03:51,510
And we have this fall in love with thing lets out a really really simple bit of logic instead of our

61
00:03:51,510 --> 00:03:57,930
template that will check if thing if the thing that the user entered is rusty then or display an extra

62
00:03:57,930 --> 00:04:00,410
line that says good choice or something like that.

63
00:04:00,630 --> 00:04:06,300
So what we'll do is in our love that each of us will first write just regular javascript and it won't

64
00:04:06,300 --> 00:04:08,600
be valid but we're just going to write the Javascript.

65
00:04:08,730 --> 00:04:20,460
So it would be something like if thing var Tripoli calls rusty and let's do lowercase so that we can

66
00:04:20,610 --> 00:04:26,660
account for uppercase and lowercase and then we'll down case this so to lower case.

67
00:04:26,850 --> 00:04:33,510
So if the lower case version of the thing variable is equal to Rusti then we'll just do another line

68
00:04:33,520 --> 00:04:33,610
.

69
00:04:33,750 --> 00:04:40,430
And I'll just write the edged him out right here so we'll make a paragraph that says Good choice.

70
00:04:40,500 --> 00:04:42,610
Rusty is the best.

71
00:04:42,610 --> 00:04:44,130
And like I said this is not valid.

72
00:04:44,130 --> 00:04:45,080
Each Yes.

73
00:04:45,270 --> 00:04:49,930
What we need to do is go ahead and add these tags around our code.

74
00:04:50,130 --> 00:04:52,140
So I'll start typing that here.

75
00:04:52,470 --> 00:05:00,070
Need our percentage equals and then same thing here and we have to wrap every line of javascript anytime

76
00:05:00,150 --> 00:05:01,850
javascript starts and ends.

77
00:05:01,950 --> 00:05:05,590
It doesn't matter that this statement doesn't end until down here.

78
00:05:05,610 --> 00:05:08,000
We have to wrap each part of it individually.

79
00:05:08,190 --> 00:05:10,070
So same thing here.

80
00:05:10,650 --> 00:05:11,680
Just like that.

81
00:05:11,720 --> 00:05:15,570
Now I like to add space and just so that it's easier to see what's what.

82
00:05:15,570 --> 00:05:21,060
So you've taken javascript and moved rafted E.J. Yes tags including this closing bracket at the bottom

83
00:05:21,480 --> 00:05:24,590
end will save and there is one slight issue.

84
00:05:24,660 --> 00:05:25,650
If I start my server

85
00:05:28,610 --> 00:05:34,040
and I go and refresh the page gives me a syntax error.

86
00:05:34,440 --> 00:05:40,670
And what I need to do to fix this I'll stop the server need to go back and get rid of these equal signs

87
00:05:41,060 --> 00:05:45,220
and I'll explain why in just a moment well let's just make sure it works now.

88
00:05:45,350 --> 00:05:47,940
So node abductor's Yes.

89
00:05:48,230 --> 00:05:52,440
And will refresh the page and we get you film of tater tots.

90
00:05:52,500 --> 00:05:55,550
P.S. This file is the love DGSE file.

91
00:05:55,550 --> 00:05:59,340
Now let's go to fall in love slash rusty.

92
00:05:59,440 --> 00:06:01,060
And now it says Good choice.

93
00:06:01,160 --> 00:06:06,290
Rusty is the best because of our if statement anywhere else though we don't get that line.

94
00:06:06,410 --> 00:06:09,530
So why do we have to take away those equal signs.

95
00:06:09,530 --> 00:06:12,690
The answer is that there are two different types of tags and each Yes.

96
00:06:12,800 --> 00:06:14,930
Let me write them out first.

97
00:06:15,620 --> 00:06:21,010
So we have this set of tags where there's an equal sign and this set where there is no equal sign.

98
00:06:21,170 --> 00:06:24,320
There actually is a third that we'll see later with a dash.

99
00:06:24,590 --> 00:06:26,750
But for now these are the only two we need.

100
00:06:27,080 --> 00:06:29,530
And there's a very important difference between the two.

101
00:06:29,900 --> 00:06:36,000
When we add the equal sign the value that is returned whatever this code returns inside of here will

102
00:06:36,000 --> 00:06:37,010
be rendered to the page.

103
00:06:37,010 --> 00:06:38,940
It will be added to the HQ mail.

104
00:06:39,000 --> 00:06:47,990
So if we had something like five plus five and we had some text here like I love this five plus five

105
00:06:48,000 --> 00:06:52,340
will be evaluated and then we'll end up with 10 in the each team itself.

106
00:06:52,670 --> 00:06:57,950
But when we're doing logic like an IF statement or what we'll see shortly when we use a loop.

107
00:06:58,160 --> 00:07:01,390
We don't want something to be added to the HD.

108
00:07:01,620 --> 00:07:03,950
This logic is here purely as logic.

109
00:07:03,950 --> 00:07:06,380
It's not supposed to display anything.

110
00:07:06,380 --> 00:07:11,120
This is supposed to display but we don't want our brackets showing up or we don't want Stephen showing

111
00:07:11,120 --> 00:07:11,580
up.

112
00:07:11,600 --> 00:07:17,270
So whenever we're doing logic control flow stuff if statements and loops we don't use the equal sign

113
00:07:17,270 --> 00:07:17,740
.

114
00:07:17,750 --> 00:07:22,840
So again equal sign will take the return value and stick it in the mail and no equal sign.

115
00:07:22,850 --> 00:07:24,110
We'll just run the code.

116
00:07:24,140 --> 00:07:29,960
The last thing I'll show is if we wanted to do an else here we just write a regular javascript else

117
00:07:30,800 --> 00:07:35,980
and then we need our closing bracket down here and we have to remember no equal sign.

118
00:07:36,170 --> 00:07:45,440
And then whatever I put in here let's do let's do another paragraph and and here it will just say bad

119
00:07:45,440 --> 00:07:46,620
choice.

120
00:07:47,270 --> 00:08:01,720
You should have said Rusti OK and save restart the server refresh and we get bad choice.

121
00:08:01,740 --> 00:08:05,900
You should have said Rustie unless we type rusty.

122
00:08:06,000 --> 00:08:06,300
OK.

123
00:08:06,320 --> 00:08:11,960
So we have one file now that is responding not only in a different way depending on the variables that

124
00:08:11,960 --> 00:08:16,070
we pass in but also depending on what the variable is equal to.

125
00:08:16,190 --> 00:08:18,180
We have some conditional logic.

126
00:08:18,530 --> 00:08:23,930
So that's half of what I want to talk about the other half is how we can use a loop in a template and

127
00:08:23,930 --> 00:08:24,460
to do that.

128
00:08:24,470 --> 00:08:27,840
I'm going to define a new post and to do that.

129
00:08:27,870 --> 00:08:29,990
I'll define another route.

130
00:08:30,000 --> 00:08:38,550
So back in my AP-Reals file let's add an app that you get and we'll just get slash posts like that.

131
00:08:38,680 --> 00:08:47,010
And what we're going to do is define an array of posts and each post will just have a title and an author

132
00:08:47,020 --> 00:08:47,200
.

133
00:08:47,350 --> 00:08:48,810
So we'll define that right now.

134
00:08:48,840 --> 00:08:51,470
Var posts equals an array.

135
00:08:51,710 --> 00:08:58,100
And then inside that array will have a few objects where we have title is host.

136
00:08:58,120 --> 00:09:02,520
One author is Soozie.

137
00:09:03,360 --> 00:09:08,630
And then we'll do the same thing just to have some starter data and we're going to pass this data through

138
00:09:08,960 --> 00:09:09,970
to our view.

139
00:09:10,120 --> 00:09:12,580
And in the view we're going to loop through it.

140
00:09:12,870 --> 00:09:15,420
So we'll have some more creative posts here.

141
00:09:15,620 --> 00:09:17,880
Adorable funny.

142
00:09:18,410 --> 00:09:25,830
And can you believe this palm ski thing today.

143
00:09:26,010 --> 00:09:26,830
I spell it.

144
00:09:27,050 --> 00:09:27,600
OK.

145
00:09:27,770 --> 00:09:30,390
And the author can be Charlie.

146
00:09:30,380 --> 00:09:38,260
And then this one will be me and we'll save and then we're going to read render a file the rest render

147
00:09:38,660 --> 00:09:41,590
and our file doesn't exist yet.

148
00:09:41,810 --> 00:09:50,360
Let's just call it Post's dot Ejay yes then we'll pass in our data posts is equal to posts.

149
00:09:50,370 --> 00:09:57,590
So again this refers to the name of the variable and posts here is what we'll call it inside the template

150
00:09:58,040 --> 00:10:01,030
and it's pretty common to see them called the exact same thing.

151
00:10:01,190 --> 00:10:06,990
But it's important that you know they are different and that's all we should need to do.

152
00:10:07,060 --> 00:10:07,750
Save.

153
00:10:07,790 --> 00:10:09,730
And then of course we need to make the template.

154
00:10:10,040 --> 00:10:14,260
So we'll do touch views slash posts.

155
00:10:14,320 --> 00:10:14,600
E.J..

156
00:10:14,610 --> 00:10:15,330
Yes.

157
00:10:15,620 --> 00:10:20,010
And then we'll open that C9 use slash Post.

158
00:10:20,040 --> 00:10:30,140
E.J. Yes and we'll start by just having a simple one here that is the Post's page and let's add in some

159
00:10:30,140 --> 00:10:36,300
Ejaz tags and just print out the value of posts just like that and will save.

160
00:10:36,330 --> 00:10:47,540
And now we can start the server node app that Julius go here and you need to go to slash posts and you

161
00:10:47,540 --> 00:10:54,610
can see we get our template says the Post page and when we print it out or when we use the percent equals

162
00:10:54,650 --> 00:10:57,510
Ejay as brackets we get the array here.

163
00:10:57,760 --> 00:11:02,330
But it doesn't actually show everything it just says object object and we want to loop through each

164
00:11:02,330 --> 00:11:07,970
one and just make an ally and the allies should say the author and the title.

165
00:11:07,970 --> 00:11:11,770
So to do that let's write the plain javascript first without Ejay us.

166
00:11:11,810 --> 00:11:15,580
So we'll have a loop and I'll do it with a for loop first.

167
00:11:15,590 --> 00:11:24,990
So for var I equal zero is less than posts that link plus plus just like that.

168
00:11:25,120 --> 00:11:29,530
And then inside over here what we'll do is make an ally.

169
00:11:29,840 --> 00:11:38,270
And for now we're just going to put post goes here and say that we can get rid of this and then we need

170
00:11:38,270 --> 00:11:41,270
to go in and wrap this with their Ejay as brackets.

171
00:11:41,380 --> 00:11:45,980
And remember no equal sign because we don't want the loop itself to be displayed.

172
00:11:46,370 --> 00:11:52,770
It's just the logic and we do the same thing for this bracket at the bottom and save.

173
00:11:53,060 --> 00:12:00,390
And what we expect to happen now is it will loop through from zero up until three so three times and

174
00:12:00,410 --> 00:12:03,920
it will print in Alwi each time that says post goes here.

175
00:12:04,220 --> 00:12:05,600
And if we restart the server

176
00:12:08,500 --> 00:12:12,230
and refresh we can see if we get three allies of course.

177
00:12:12,230 --> 00:12:15,860
Now we want to make them say the actual content of the post.

178
00:12:16,000 --> 00:12:21,410
So that's a little bit more work where instead of an ally that just says post goes here we need to add

179
00:12:21,410 --> 00:12:24,160
javascript inside the ally.

180
00:12:24,320 --> 00:12:31,710
And what we want to write is posts high and we'll just do the title for now dot title.

181
00:12:31,730 --> 00:12:34,870
Remember each post has a title and an author.

182
00:12:35,380 --> 00:12:38,840
OK so we'll start the server over.

183
00:12:39,590 --> 00:12:43,870
Go back here refresh and we get our three titles.

184
00:12:44,450 --> 00:12:50,540
Let's do one last thing which is make this in our template so that it also displays the author with

185
00:12:50,540 --> 00:12:53,750
a dash and will hold the author.

186
00:12:53,780 --> 00:13:01,380
So it's another set of Ejaz tags where we're going to save posts dot author.

187
00:13:01,630 --> 00:13:06,100
And the reason we need another set is that we want this dash between the two.

188
00:13:06,290 --> 00:13:09,220
And also make a bold tag.

189
00:13:09,440 --> 00:13:14,480
Do strong and we'll put the each of us inside of that.

190
00:13:14,990 --> 00:13:15,790
So it looks like a lot.

191
00:13:15,800 --> 00:13:17,820
Let's indent this a little bit better.

192
00:13:17,930 --> 00:13:24,480
So we're making an ally for each post ups.

193
00:13:24,860 --> 00:13:25,530
There we go.

194
00:13:25,790 --> 00:13:31,240
And we're going to have a title dash strong around the post author.

195
00:13:31,550 --> 00:13:32,180
OK.

196
00:13:32,540 --> 00:13:38,720
Now we'll restart and refresh.

197
00:13:38,990 --> 00:13:41,280
Looks like it didn't save the file.

198
00:13:41,360 --> 00:13:46,670
Now we're restarted and refresh and there we go.

199
00:13:46,670 --> 00:13:53,660
We get post 1 dash the author which is Soozie and then the next post dash the author Charlie and the

200
00:13:53,650 --> 00:13:55,820
authors are in bold.

201
00:13:56,720 --> 00:13:59,220
OK so we don't have to just use a for loop.

202
00:13:59,450 --> 00:14:03,350
We could do the exact same thing with a foreach or a while loop.

203
00:14:03,640 --> 00:14:10,030
And in fact you'll see a foreach much more commonly so posts thought for each and then we write her

204
00:14:10,040 --> 00:14:10,850
code in here.

205
00:14:10,850 --> 00:14:12,790
Function post.

206
00:14:13,760 --> 00:14:16,690
And then we need to add our brackets on either side.

207
00:14:17,090 --> 00:14:21,230
No equal sign again because this is not supposed to show up.

208
00:14:21,290 --> 00:14:23,240
It's just logic or control flow.

209
00:14:23,510 --> 00:14:30,750
And then I'm just going to steal this ally and run that make an ally with an equal sign for our data

210
00:14:30,800 --> 00:14:34,090
because we do want that to show up for every post.

211
00:14:34,370 --> 00:14:35,740
But we need to change one thing.

212
00:14:35,840 --> 00:14:37,460
We're not using a for loop anymore.

213
00:14:37,530 --> 00:14:38,670
There is no I.

214
00:14:38,990 --> 00:14:44,240
So this just becomes post-Idol which is why I prefer to use a for each.

215
00:14:44,380 --> 00:14:46,170
It's shorter it's simpler.

216
00:14:46,280 --> 00:14:51,190
But this also gives us the ability to name this post rather than posts.

217
00:14:51,200 --> 00:14:54,740
I see we don't have to work with that index variable anyway.

218
00:14:54,770 --> 00:14:58,820
It's just a matter of personal preference so these will both do the exact same thing.

219
00:14:58,840 --> 00:15:02,770
So see make sure to save and restart the server.

220
00:15:02,890 --> 00:15:05,280
One last time and refresh.

221
00:15:05,620 --> 00:15:08,360
And we now have two sets that are identical.

222
00:15:08,360 --> 00:15:10,090
One set the first three.

223
00:15:10,250 --> 00:15:16,050
It's a regular for loop and is three used for each to print things out.

224
00:15:16,100 --> 00:15:16,410
All right.

225
00:15:16,430 --> 00:15:18,740
So let's take a moment to wrap everything up.

226
00:15:18,740 --> 00:15:25,700
The big takeaway that probably the most important idea here is the distinction between percent equals

227
00:15:26,650 --> 00:15:28,370
and just percent.

228
00:15:28,700 --> 00:15:34,050
Remember this will render whatever the code returned inside of it to the L..

229
00:15:34,100 --> 00:15:40,820
It's basically like a blank space that will be filled in by whatever code is executed in here versus

230
00:15:40,820 --> 00:15:46,960
this with no equal sign just evaluates code but it doesn't actually add anything to the team.

231
00:15:47,510 --> 00:15:50,300
And we'll use these brackets without the equal sign.

232
00:15:50,360 --> 00:15:57,650
Most commonly four if statements like we did right here where we checked if the value is equal to something

233
00:15:57,770 --> 00:16:05,870
then print this and make this mail otherwise make this other t m l and also for loops which we did here

234
00:16:05,880 --> 00:16:06,030
.

235
00:16:06,200 --> 00:16:12,030
So no equal signs on the loops but on the values that we do want to show up in the hemo We of course

236
00:16:12,050 --> 00:16:13,030
add the equal sign in