Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Pug templates can contain logic you can use to make them more versatile. You can show or hide parts of the page conditionally, or iterate over arrays of data to express tables or lists more concisely.
Snippet Used in the Video
const colors = [
'red',
'orange',
'yellow',
'green',
'blue',
'purple'
];
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You've seen how to pass variables to
templates to render dynamic values but
0:00
the truth is pug lets you go further and
add basic programming logic to templates.
0:04
For example, you can display a good
when your app knows a user's name.
0:10
But hide the button if the user
hasn't entered it yet.
0:15
You could write a conditional
statement to handle that.
0:18
Or suppose you want to hand
a template a list of things and
0:21
have that list rendered in the HTML.
0:24
You could use a loop to do that.
0:27
Let's see how to use these
two features in templates.
0:29
First, I'll show you what happens
when I delete this hint from the app.
0:33
Even without a hint,
the service still renders the text Hint:.
0:43
What if we only want this text to show
up if there's actually a hint value?
0:48
We can use a conditional in Pug.
0:54
Let's switch back to the template,
and I'll create a new line.
0:57
I'll do it just above
this paragraph element.
1:02
I'll type if space hint,
1:05
then I'll nest the paragraph tag under it.
1:08
Going back to the browser and
refreshing, there's no text.
1:15
That's because there's
no longer a hint value.
1:21
Let's bring back the hint, and as you can
see the paragraph tag is back, cool.
1:24
Let's say we wanted to display something
other than a blank space if the hint
1:32
is undefined.
1:36
We can use an else clause for that.
1:37
Switch back to the template, and
underneath the hint, type else.
1:41
Nested under that,
a paragraph that says, there is no hint.
1:50
Testing this out in the browser, the hint
will still show up if its defined.
1:59
If I go back to my editor and
redo the deletion,
2:04
hit save, now in the browser, when I
refresh, we see that the text shows up,
2:10
there is no hint,
if the hint variable is undefined.
2:16
For this app,
2:21
I think I'd rather just have no text
there when there's no hint available.
2:22
So I'll delete this else
logic in the template.
2:27
All I just wanted to show
you that that is possible.
2:33
Often you'll want to have a default
element render in similar cases.
2:37
Let's look how Pug handles looping or
iterating through an array of values.
2:42
Let's built an unordered list of colors.
2:47
First, in the app.js file, at the top,
2:50
I'm going to create a list of colors.
2:56
I'll just paste in this array.
3:04
If you look in the teacher's notes, I've
included this snippet to paste in too.
3:07
Next, I'll post the array
into the template.
3:12
Now, inside my template,
I'll create a UL element.
3:18
Nested inside, I'll type each,
3:27
which is a Pug keyword to
indicate a loop is starting,
3:32
then I'll type color in colors.
3:37
Colors at the end,
3:42
is the variable holding the array
that we passed into the template.
3:44
Color will be each individual
string from the array.
3:48
We can output the color on this page.
3:52
So nested under the loop,
I'll create a new list item, element.
3:55
Then the equals sign and
assign the string color.
4:01
So, just to go over what's happening here.
4:07
We're telling pug for each color
in the color's array then render
4:10
a list item element that
holds the text of the color.
4:17
If I save that and
head back to the browser, you can see
4:24
the loop went through our array and
created list items for all colors.
4:29
You can now see it even more clearly
when we go into the develop tools and
4:34
inspect the DOM.
4:39
You could use this loop to create
all of the rows in a table.
4:47
Or output multiple divs to
display an array of objects.
4:50
Like block titles and descriptions.
4:54
I'm just going to delete this
colors array from our app now.
4:57
And I'll also remove
the code from our template.
5:04
I'd like to recommend an an excise to
you to put some of these ideas that
5:12
you've been learning into practice.
5:15
Create a new route in your
app with a new template.
5:18
You could call the route
something like sandbox.
5:22
It's just a place for you to play around,
passing in values into pug templates, and
5:28
rendering them so
you can see in the browser.
5:32
You can also try out some conditional
statements and iteration.
5:35
As an added challenge, try and
create a two-column table.
5:39
With a first name, and a last name.
5:44
Then pass in five names of your friends or
5:53
famous people or
both rendering them into rows on a table.
5:56
Although we've seen templates and how
they can reduce a lot of repetitive code.
6:01
There's one more feature that
might be the biggest one yet.
6:05
Let's take a look at
that in the next video.
6:09
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up