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
Using Response.render is where we'll get to start putting dynamic data into the Express app!
Express Documentation
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 just saw how Express
renders HTML with Pug.
0:00
However, we've still been
working with only static data,
0:03
sending a fixed HTML
string to the browser.
0:06
The real power of templates comes into
play when you use variables to inject
0:10
customized content, such as a user's name,
a list of shopping cart items, or
0:14
text of a blog post.
0:19
In this video,
we'll create a flash card template.
0:21
The text for this title here, and
the hint are not in the template.
0:24
They are being supplied to
the template through variables,
0:31
which are injected into
the template as it's rendered.
0:34
Let's see how this is done.
0:37
We'll start by shaping our
index.pug file a bit more.
0:40
We are building a flash card up.
0:43
So, I will rename the title
to be Flash Cards.
0:45
I'll also copy that and
paste that into the h1 tag too.
0:51
Let's add some structure to the page now.
0:57
I'll wrap the h1 tag in a header element.
1:00
And underneath that, I'll create a section
element, with the id of content.
1:06
I'll leave the content empty for now.
1:14
Underneath it,
let's put a footer element, and
1:16
a paragraph inside it that
says an app to help you study.
1:21
Let's put an h2 tag in
to welcome the student.
1:28
The welcome page is in good shape.
1:35
A lot of this HTML, like the doctype HTML,
1:38
and body tags are similar to what we'll
use on the other pages on the site.
1:45
Let's copy this code and
use it for an individual card.
1:51
I'll name the new page card.pug.
1:54
Before we add a variable to the card.pug
file, lets see how they're used.
2:01
Here's the form you're
already familiar with.
2:07
Pug will print the text
static text inside an h1 tag.
2:09
Here's how you render a variable in Pug.
2:15
You use the equal sign after the tag.
2:18
After the equal sign,
Pug expects a variable.
2:21
In this case the variable name is variable
If it is undefined, this h1 will be empty.
2:25
In cab.pug the h2 element should
hold the flash card text.
2:33
So, remove welcome student and
2:38
I will type the = sign next to the tag,
followed by a space.
2:41
Lets name the variable prompt,
because flashcards have prompts.
2:48
The question you ask.
2:52
The prompt is on one side and
then the answer is on the other.
2:54
Now let's switch over to the app.js file.
2:58
To see the flashcards,
someone must visit the slash cards route.
3:03
So I'm going to rename
the hello route to cards.
3:07
This will then serve the cards for
the app.
3:15
We'll need to use the pug template, so
I'll change this to the render method.
3:18
And pass in card as the template.
3:28
To see how to pass in variables to
the template, let´s look at the docs.
3:31
The response dot render method
takes in two optional parameters.
3:36
The square brackets indicate
that they are optional.
3:43
The second parameter is called locals.
3:46
Placing an object here will
define locals for the view.
3:49
Locals is the name for
3:54
variables we want the view to have
access to when it's being rendered.
3:55
The properties of the object we
pass in as the second argument
4:01
will define the locals in the template.
4:05
In app js I'll pass in an object.
4:08
Adding the property prompt.
4:14
I will set it to "Who is buried
4:18
in Grant´s tomb?".
4:25
If I save that and switch over to
the browser and go to the cards URL,
4:30
you'll see, who is buried in Grant's tomb.
4:37
Let's go back to the documentation and
4:44
I'll show you another way to create the
same local variable name for our template.
4:47
We can add properties to the res.locals,
to pass in values to the template.
4:52
The name of the property will
define the local variable name.
4:58
Let's try it out.
5:02
In app.JS let's cut this string.
5:04
And delete the object.
5:11
Then I'll make a line
above the render call and
5:16
set res.locals.prompt to the string.
5:22
Save the file, head over to the browser
again, refresh the page and
5:27
nothing's changed.
5:33
Which is what we're looking for.
5:34
I'll go back and
undo to use the first way again.
5:37
Look at the H2 element.
5:45
Right now, the variable is only
the text inside of the H2 tag.
5:50
If we wanted to use some other static
text plus a variable inside we can use
5:58
interpolation similar to the way that you
can use template literals in JAVA Script.
6:04
To interpolate, or
6:12
add variables to static text you use
the hash symbol with curly brackets.
6:14
The curly brackets surround the variable
whose value you want to combine with
6:20
the text.
6:24
If name were equal to
Andrew in this example,
6:25
this is the output you'd
expect on the page.
6:29
Note that interpolation doesn't work for
attributes though.
6:32
You'll need to concatenate
strings with any
6:37
values you want to put into attributes,
or use template literals.
6:39
To see interpolation in action,
let's create a hint for the prompt.
6:46
I'll pass in another
variable into the template.
6:51
I'm going to call it hint.
6:55
The value will be think
6:56
about whose tomb It is.
7:01
I want to start with the text, hint,
7:05
no matter what the hint is,
I will hit return and
7:10
type, p, an indent with i Hint: and
7:17
then the hint locals.
7:21
The syntax is very similar
to what you would use
7:25
in a JavaScript template literal.
7:28
With a # symbol instead of a $ symbol.
7:30
You might be wondering what other
JavaScript like things you can put into
7:34
Pug templates, we'll get into that next.
7:39
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