Preview

Start a free Courses trial
to watch this video

ERB Tags

7:15 with Jay McGavren

Let's talk about the "embedding" part of "Embedded Ruby". You store some static text, usually HTML code, in a file. Then, using special ERB tags, you embed Ruby code that displays changing, dynamic data into the static text. Each time the template is rendered, each piece of Ruby code is evaluated to get a result. Those results are inserted into the template in place of the ERB tags, giving you text that changes each time the template is rendered.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

We're getting the page title from a URL parameter and 0:00

we're using it to load in page content from a text file. 0:02

Now we just need to convert our response to actual HTML and 0:06

we can do that using ERB. 0:09

Let's talk about the embedding part of embedded Ruby. 0:12

You store some static text, usually HTML code, in a file. 0:16

Then using specially ERB tags you embed Ruby code into the static 0:20

text that displays changing dynamic data. 0:24

Each time the template is rendered each piece of Ruby code is evaluated to 0:27

get a result. 0:31

Those results are inserted into the template in place of the ERB tags, 0:32

giving you text that changes each time the template is rendered. 0:36

Let's set up a temporary playground where we can try out ERB text. 0:40

I'm going to create a new get route with a path of /test. 0:44

It's important to place this before the get title route in 0:51

your code to avoid a conflict. 0:54

We'll talk about the reason for that later. 0:55

Within the route block, we'll call the ERB method and 0:58

have it render a template called test. 1:02

Then we'll create a new file in the views directory called test.erb. 1:05

The next time we visit the /test path, it will render the contents of this file. 1:13

There are two kinds of ERB, tags, regular embedding tags and output embedding tags. 1:18

Regular embedding tags start with <% and 1:24

end with %>, they contain some Ruby code in between those symbols. 1:28

The code gets evaluated but the results aren't placed directly into the output. 1:32

So let's say I had a regular tag like this, grade = 54. 1:37

When the tag gets evaluated the grade variable will be set but 1:42

nothing will appear in the output. 1:45

Regular embedding tags are most frequently used for two things, loops and 1:48

including or excluding parts of the template based on the condition. 1:51

If you include a conditional like an IF expression in a regular embedding tag, 1:55

any text inside the conditional will only be included in the output if 1:59

the condition is true. 2:03

So let's say that I had a statement up here, 2:05

a regular ERB tag setting the grade variable to 97. 2:09

And then I'll put insert another ERB tagged with a conditional in it. 2:13

if grade, if the grade variable, if the value in it is greater than 60, 2:18

I'll put separate ERB tag down here with the end keyword to end the if statement. 2:23

Now anything contained inside that conditional is only going to be printed 2:32

if the conditional is true. 2:35

So let's put a paragraph tag in here saying you passed. 2:37

If grade were lower than sixty, you passed would not be included in the output. 2:42

But since it's set to ninety seven, it will be. 2:47

Let's save this. 2:49

And now let's restart our server. 2:51

And try visiting the /test path. 2:57

It loads the test.arb tag, 3:02

evaluates the Ruby code setting the grade variable to 97. 3:04

Then it checks the conditional testing whether the grade variable is greater 3:08

than 60. 3:12

And it is, so it prints the paragraph tag, you passed. 3:13

If we change the variable's value to say 54, 3:17

save that, and reload the page, the condition 3:21

will no longer be true and the you passed HTML will be excluded from the output. 3:27

By the way you may have noticed that I didn't restart the app after making 3:33

changes to the ERB template. 3:36

That's because, 3:38

unlike the main Ruby code, ERB templates are reloaded each time they're rendered. 3:39

So if you save changes to the ERB template, 3:44

they'll show up as soon as you refresh your browser. 3:46

The other common use of regular embedding tags is in loops. 3:49

If you place a loop in a regular embedding tag, 3:52

any text inside the loop lobby will be output repeatedly. 3:54

So let's say that I wanted to output three paragraphs containing the word fish. 3:58

We'll create a regular embedding tag up here and 4:03

we'll loop three times by calling the times method on the integer object three. 4:06

Times method takes a block which loops that number of times. 4:12

And since it's a do end block we need the end keyword down here in a separate tag. 4:18

Now any text we put inside the loop here will be repeated that number of times. 4:23

So let's put an HTML paragraph tag, and we'll just put the word fish inside it. 4:27

Save this and reload our page. 4:33

And you see it loops three times, 4:36

each time outputting an HTML paragraph with the word fish. 4:38

In addition to regular embedding tags, ERB also has output 4:42

embedding tags which begin with <%= and end with %>. 4:47

The equal sign at the start is the only difference in how you type output tags 4:53

versus regular tags. 4:56

Like regular embedding tags the Ruby code inside an output tag gets evaluated when 4:59

the template is rendered. 5:03

But unlike regular tags, the return value of the Ruby code gets included in 5:04

the template in place of the tag. 5:08

So if we have an output embedding tag with the math operation 2 + 2, 5:11

when the template is rendered the code will be evaluated and the result, four, 5:14

will be included in the output. 5:19

Similarly, we can place a call to the time.now method in an output tag and 5:22

we'll get the current time in the output. 5:26

And because the values are updated every time we render the template, 5:30

we can refresh the page and see a new result every time. 5:33

We can mix regular embedding tags and output embedding tags too. 5:37

For example, we can nest an output embedding tag inside an each block and 5:41

the output tag will be evaluated repeatedly. 5:45

So let's say we wanted to print an HTML paragraph element for 5:48

each item in an array. 5:52

We can set up the array within a regular embedding tag. 5:54

And the each method, if you recall, loops through each element of the array, 6:05

passing it to the argument here in the block. 6:09

Again this is a multi-line block starting with do, so 6:13

we're going to need the end keyword in a separate tag down here. 6:15

And any text here within the loop will get repeated. 6:20

So we're going to output an HTML paragraph tag and we're going to embed within it 6:23

the output number, the current value of the number variable. 6:28

Let's save this and reload our page. 6:35

And we get the output 1 fish, 5 fish, 25 fish. 6:38

It loops through each value and our array, passes it into the number argument to 6:41

the block, and then within the loop body this output embedding tag gets evaluated. 6:47

The current value of number is the result, and that gets embedded into the output. 6:53

So that's how to embed Ruby code into an HTML template using ERB. 6:58

We're done trying out ERB code for now, so 7:02

let's go into the views directory and delete the test.erb file. 7:04

We'll also want to go into the main app code and delete the get /text route 7:10

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace

Building Web Apps with Sinatra

ERB Tags

Related Discussions

Related Discussions