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' ];
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 this node 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 tech 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 lib 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 up