This video and when to show you a few other things that we can do instead of an Ejaz File.
Up until now all that we've seen is adding in regular HDMI.
And then also using Ejaz tags to add in a single line of javascript that's using a variable that we're
passing through from our app file using redstart render or passing thing vars through.
But there are other things that we can and will do all the time using Aegeus.
So we're going to talk about them here.
I have three main objectives on a show you some examples in the real world of this control flow and
templates and then I'm going to show you how we can write IF statements in each file and also how we
can write loops and in each case file.
Let me start by showing an example of what I'm talking about.
So I have read it open.
This is the soccer Sobran it.
And what I want you to notice is that there's a list of posts twenty five on this page and each one
follows a similar format except they're slightly different.
Let's inspect and I'll show you what I mean.
So they're all inside of a div.
Each one is a div with the class of entry but they're slightly different in that some of them have a
button here that shows it to video.
They can play some of them show that it's a tweet and on some of the other ones I can also expand text
so they follow this format where for each post we're getting we're getting a div with class entry and
each one has a paragraph with Classical the title and another paragraph of the class equal with tagline
and they follow a standardized format.
But they're all different.
And then obviously the content is different as well.
The actual text the words the lengths all of that.
So this is done with a template where we have a collection of posts and let's just say we were writing
this we would get all of the soccer related posts from the database whatever order these are in.
I think we're ranking them by hotness.
However Reddit calculates that.
So we have all these posts from the database and then what we do is loop through and for each post we
make one of these items.
So our Ejay file would look something like this.
If I were to just write some pseudo code loop through all posts and then for each one what we want to
do is make a post give or make an entry Div I think is what they called it.
And that entry div should have a title and a tag line and whatever else goes along with it.
And that will happen for every single post.
So we'll just define a pattern for one post.
But using the magic of Ejay guess we can get it to repeat for every item in a list or every item in
our database.
The other thing we can do is add in some conditional logic to make things look and behave a little differently
.
And so that's how.
Here some of them have a play button for video.
Some of them have a Twitter icon.
Some of them will have a whistle here.
Some of them have a soccer ball and some text that we can expand.
And that's done with an if statement.
Of course centrally the code says something like if this link is Twitter dot com then show a Twitter
logo if this link is a video or a gif slash Jeff however you pronounce it.
Then show the video icon and make this button work.
And if the post is a match thread then show a soccer ball.
That's just one example on one Web site of how having logic in your templates is really important.
But any site out there any web application Facebook Gmail Twitter they all use it templating language
though they don't all use Ejay us.
There are tons and tons of different templating systems and languages out there but their core functionality
is all the same.
The idea again is that we can add logic to our HMO.
So now let's go do that and get rid of this for now and let's go back to our app.
Yes.
And we have this fall in love with thing lets out a really really simple bit of logic instead of our
template that will check if thing if the thing that the user entered is rusty then or display an extra
line that says good choice or something like that.
So what we'll do is in our love that each of us will first write just regular javascript and it won't
be valid but we're just going to write the Javascript.
So it would be something like if thing var Tripoli calls rusty and let's do lowercase so that we can
account for uppercase and lowercase and then we'll down case this so to lower case.
So if the lower case version of the thing variable is equal to Rusti then we'll just do another line
.
And I'll just write the edged him out right here so we'll make a paragraph that says Good choice.
Rusty is the best.
And like I said this is not valid.
Each Yes.
What we need to do is go ahead and add these tags around our code.
So I'll start typing that here.
Need our percentage equals and then same thing here and we have to wrap every line of javascript anytime
javascript starts and ends.
It doesn't matter that this statement doesn't end until down here.
We have to wrap each part of it individually.
So same thing here.
Just like that.
Now I like to add space and just so that it's easier to see what's what.
So you've taken javascript and moved rafted E.J. Yes tags including this closing bracket at the bottom
end will save and there is one slight issue.
If I start my server
and I go and refresh the page gives me a syntax error.
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
and I'll explain why in just a moment well let's just make sure it works now.
So node abductor's Yes.
And will refresh the page and we get you film of tater tots.
P.S. This file is the love DGSE file.
Now let's go to fall in love slash rusty.
And now it says Good choice.
Rusty is the best because of our if statement anywhere else though we don't get that line.
So why do we have to take away those equal signs.
The answer is that there are two different types of tags and each Yes.
Let me write them out first.
So we have this set of tags where there's an equal sign and this set where there is no equal sign.
There actually is a third that we'll see later with a dash.
But for now these are the only two we need.
And there's a very important difference between the two.
When we add the equal sign the value that is returned whatever this code returns inside of here will
be rendered to the page.
It will be added to the HQ mail.
So if we had something like five plus five and we had some text here like I love this five plus five
will be evaluated and then we'll end up with 10 in the each team itself.
But when we're doing logic like an IF statement or what we'll see shortly when we use a loop.
We don't want something to be added to the HD.
This logic is here purely as logic.
It's not supposed to display anything.
This is supposed to display but we don't want our brackets showing up or we don't want Stephen showing
up.
So whenever we're doing logic control flow stuff if statements and loops we don't use the equal sign
.
So again equal sign will take the return value and stick it in the mail and no equal sign.
We'll just run the code.
The last thing I'll show is if we wanted to do an else here we just write a regular javascript else
and then we need our closing bracket down here and we have to remember no equal sign.
And then whatever I put in here let's do let's do another paragraph and and here it will just say bad
choice.
You should have said Rusti OK and save restart the server refresh and we get bad choice.
You should have said Rustie unless we type rusty.
OK.
So we have one file now that is responding not only in a different way depending on the variables that
we pass in but also depending on what the variable is equal to.
We have some conditional logic.
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
to do that.
I'm going to define a new post and to do that.
I'll define another route.
So back in my AP-Reals file let's add an app that you get and we'll just get slash posts like that.
And what we're going to do is define an array of posts and each post will just have a title and an author
.
So we'll define that right now.
Var posts equals an array.
And then inside that array will have a few objects where we have title is host.
One author is Soozie.
And then we'll do the same thing just to have some starter data and we're going to pass this data through
to our view.
And in the view we're going to loop through it.
So we'll have some more creative posts here.
Adorable funny.
And can you believe this palm ski thing today.
I spell it.
OK.
And the author can be Charlie.
And then this one will be me and we'll save and then we're going to read render a file the rest render
and our file doesn't exist yet.
Let's just call it Post's dot Ejay yes then we'll pass in our data posts is equal to posts.
So again this refers to the name of the variable and posts here is what we'll call it inside the template
and it's pretty common to see them called the exact same thing.
But it's important that you know they are different and that's all we should need to do.
Save.
And then of course we need to make the template.
So we'll do touch views slash posts.
E.J..
Yes.
And then we'll open that C9 use slash Post.
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
Ejaz tags and just print out the value of posts just like that and will save.
And now we can start the server node app that Julius go here and you need to go to slash posts and you
can see we get our template says the Post page and when we print it out or when we use the percent equals
Ejay as brackets we get the array here.
But it doesn't actually show everything it just says object object and we want to loop through each
one and just make an ally and the allies should say the author and the title.
So to do that let's write the plain javascript first without Ejay us.
So we'll have a loop and I'll do it with a for loop first.
So for var I equal zero is less than posts that link plus plus just like that.
And then inside over here what we'll do is make an ally.
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
to go in and wrap this with their Ejay as brackets.
And remember no equal sign because we don't want the loop itself to be displayed.
It's just the logic and we do the same thing for this bracket at the bottom and save.
And what we expect to happen now is it will loop through from zero up until three so three times and
it will print in Alwi each time that says post goes here.
And if we restart the server
and refresh we can see if we get three allies of course.
Now we want to make them say the actual content of the post.
So that's a little bit more work where instead of an ally that just says post goes here we need to add
javascript inside the ally.
And what we want to write is posts high and we'll just do the title for now dot title.
Remember each post has a title and an author.
OK so we'll start the server over.
Go back here refresh and we get our three titles.
Let's do one last thing which is make this in our template so that it also displays the author with
a dash and will hold the author.
So it's another set of Ejaz tags where we're going to save posts dot author.
And the reason we need another set is that we want this dash between the two.
And also make a bold tag.
Do strong and we'll put the each of us inside of that.
So it looks like a lot.
Let's indent this a little bit better.
So we're making an ally for each post ups.
There we go.
And we're going to have a title dash strong around the post author.
OK.
Now we'll restart and refresh.
Looks like it didn't save the file.
Now we're restarted and refresh and there we go.
We get post 1 dash the author which is Soozie and then the next post dash the author Charlie and the
authors are in bold.
OK so we don't have to just use a for loop.
We could do the exact same thing with a foreach or a while loop.
And in fact you'll see a foreach much more commonly so posts thought for each and then we write her
code in here.
Function post.
And then we need to add our brackets on either side.
No equal sign again because this is not supposed to show up.
It's just logic or control flow.
And then I'm just going to steal this ally and run that make an ally with an equal sign for our data
because we do want that to show up for every post.
But we need to change one thing.
We're not using a for loop anymore.
There is no I.
So this just becomes post-Idol which is why I prefer to use a for each.
It's shorter it's simpler.
But this also gives us the ability to name this post rather than posts.
I see we don't have to work with that index variable anyway.
It's just a matter of personal preference so these will both do the exact same thing.
So see make sure to save and restart the server.
One last time and refresh.
And we now have two sets that are identical.
One set the first three.
It's a regular for loop and is three used for each to print things out.
All right.
So let's take a moment to wrap everything up.
The big takeaway that probably the most important idea here is the distinction between percent equals
and just percent.
Remember this will render whatever the code returned inside of it to the L..
It's basically like a blank space that will be filled in by whatever code is executed in here versus
this with no equal sign just evaluates code but it doesn't actually add anything to the team.
And we'll use these brackets without the equal sign.
Most commonly four if statements like we did right here where we checked if the value is equal to something
then print this and make this mail otherwise make this other t m l and also for loops which we did here
.
So no equal signs on the loops but on the values that we do want to show up in the hemo We of course
add the equal sign in