Preview

Start a free Courses trial
to watch this video

Populating the View

8:57 with Jay McGavren

We've set up our controller's "index" method to load all "Page" objects into the "@pages" instance variable. We've also created some "Page" records for it to load. That was only part of the problem, though; we still don't see any page data. That's because we haven't set up the our view template to display the pages we've loaded. To do that, we're going to use ERB to embed some Ruby code into our HTML.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Most text in an ERB template is copied to the output verbatim.

<p>I'll appear in the output exactly as I do here.</p>

But Ruby code within ERB tags gets evaluated instead of being copied directly to the output.

Code within output ERB tags (<%= %>) is evaluated, and the result is embedded into the output. This code will output the current time:

<p>The current time is: <%= Time.now %></p>

Code within regular ERB tags (<% %>, without an equals sign) is also evaluated, but is not included directly in the output. It can be used to influence the result of output tags.

If you place a conditional within regular tags, text within the conditional will only be output if the condition is true. This code will include You passed! in the output:

<% grade = 97 %>
<% if grade > 60 %>
  You passed!
<% end %>

This code will not:

<% grade = 54 %>
<% if grade > 60 %>
  You passed!
<% end %>

If you place a loop in regular ERB tags, text within the loop will be output repeatedly. This code will output 4 <p> elements with the text 0 fish, 1 fish, 2 fish, and 3 fish:

<% 4.times do |index| %>
  <p><%= index %> fish</p>
<% end %>

Assuming @pages contains a collection of Page objects, this code will output the title of each Page:

<% @pages.each do |page| %>
  <p>
    <%= page.title %>
  </p>
<% end %>

Want to learn about looping over the values in a collection with each? Check out our Ruby Loops course.

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've set up our controller's index method to load all page objects into 0:00

the pages instance variable. 0:04

We've also created some page records for it to load. 0:06

That was only part of the problem though. 0:09

If we exit the console and rerun the server with bin/rails s 0:12

then reload the page we still don't see any page data. 0:17

That's because we haven't set up our view template to display the pages 0:22

we've loaded. 0:25

To do that we're going to use ERB to embed some Ruby code into our HTML. 0:26

Remember ERB stands for Embedded Ruby. 0:31

It allows you to take a text file, 0:34

such as an HTML template that always shows the same static text, and 0:36

embed Ruby code into it that displays changing dynamic data. 0:40

Each time the template is rendered the Ruby code is evaluated to get a result, 0:45

that result is inserted into the template in place of the Ruby code, 0:49

giving you text that changes each time it's run. 0:53

There are two types of ERB tags, 0:55

the simplest to use is the output embedding tag 0:59

which begins with a <%= and ends with %>. 1:04

This tag evaluates the Ruby code it contains and 1:09

embeds the results in the finished text. 1:12

So I can write Ruby code within this tag to get the title of a page object and 1:14

it will be embedded in the page. 1:18

So we'll type pages to access the instance variable we set up in 1:20

the pages controller. 1:24

.first to access the first object in that collection. 1:25

And .title to get the title attribute from that page object. 1:31

If we save our work and 1:36

reload the browser we'll see the title of our first page record. 1:37

We need to loop through all of the page objects and add them to the list though, 1:41

for that we're going to need the second type of ERB tag. 1:45

The regular embedding tag evaluates Ruby code 1:50

without inserting its result in the finished text. 1:52

It begins with <% without an equals sign and 1:56

like the output embedding tag it ends with %>. 2:00

It's used for things like conditionals and loops. 2:06

Let's play around with regular embedding tags for a moment to see how they work. 2:08

Let's add a regular embedding tag that assigns to a local variable. 2:13

We'll say <% grade = 97 %>. 2:16

If we save and reload our browser, you can see nothing appears in the output. 2:21

If you place an IF expression inside regular embedding tags, 2:26

then text inside those tags will only be printed if the condition is true. 2:30

Let's try adding an IF expression that tests whether the grade variable's value 2:35

is greater than 60. 2:39

All ERB tags within a template are evaluated within the same context, 2:44

so we can still access the grade variable even though it was assigned 2:48

in the different tag. 2:52

We also need an end keyword to go with our IF statement, so 2:53

we'll add that down here on a separate tag. 2:56

Between those two tags we can put any text we want but 2:58

it will only be included if the statement is true. 3:01

So if greater than 60 will output You Passed! 3:04

If we save and reload the browser, we'll see You Passed!, in the browser response. 3:11

If we were to change the grade variable to a value lower than 60 though, 3:18

say 54, and then save that and 3:22

reload our browser, we'll see that the You Passed!, output goes away. 3:25

That's because the text within the conditional statement doesn't get included 3:30

since the statement was false. 3:34

You can also use regular embedding tags for loops. 3:36

If you place a loop inside the tags and the text inside the loop gets repeated. 3:39

So we can start a loop using a tag here,<% 4.times do %>. 3:43

Again, we'll need an end statement in a separate tag on a separate line. 3:52

And in the middle, we'll put some text that we want to repeat, 3:57

an HTML paragraph tag with the word, fish. 3:59

If we save our work and 4:05

reload the browser, we'll see four paragraphs with the word fish. 4:06

You can also include output embedding tags within conditionals or loops. 4:11

Within a loop that means you can have different output with each pass 4:15

through the loop. 4:18

We could use this loop to output zero fish, one fish, two fish, 4:19

three fish by taking a parameter in the block. 4:22

Because the times method passes an index to its block. 4:26

And then output in that parameter within the loop. 4:31

So we'll put in the output embedding tag here, don't forget the equals sign. 4:34

And within that tag will access the value of the index variable. 4:41

Let's save that, reload our browser, oops and 4:46

I forgot a space there, let me add one in between there. 4:50

There we go reload and we have 0 fish, 1 fish, 2 fish, 3 fish. 4:54

Now that we know how to do loops in ERB, we want to loop over the collection of 4:58

page objects and output a title for each one. 5:02

If you've gone through our earlier Ruby courses you probably remember the each 5:05

method collections like arrays and hashes have. 5:09

The each method is really important. 5:12

So if you don't already know about it, 5:14

be sure to check the teacher's notes to learn more. 5:15

But basically the each method yields to a block for 5:18

each item in a collection, passing that item to the block as a parameter. 5:20

We can try the each method out on the rails console if we want. 5:25

Hold the server if it's running and type bin/rails c to launch the console. 5:30

Let's assign the collection of all page objects to a variable with 5:36

pages = Page.all. 5:40

Then we'll call the each method on the collection with pages.each. 5:45

We need to pass a block as well, we'll follow convention and 5:51

use the curly braces block style since we're doing this on a single line. 5:54

The block will receive the current page as a parameter and 5:58

within the block we'll just print the current pages title with puts page.title. 6:03

Give return to run this and it will loop over all of our page objects and 6:10

print the title for each. 6:14

Since we're on the console, it will also display the pages collection 6:16

since that's the return value of the each method. 6:19

Now let's see if we can do the same in ERB template. 6:23

We'll exit the console, re-run our server with 6:26

bin/rails s and go back to our editor. 6:31

We'll add a regular tag to hold the start of our loop. 6:38

Within that tag we'll call the each method on the collection in the pages 6:44

instance variable, pages.each. 6:48

We'll pass a block to each with a parameter to receive the current page. 6:51

So we'll start the block with do and 6:55

there's our parameter to hold the current page. 6:57

Since this loop will span multiple lines instead of a single line, 7:01

we'll follow convention and use the do end block style. 7:04

Of course, we'll need an end keyword which we'll put in a separate tag 7:07

down on this line. 7:11

Now in the middle we can put any text that we want to repeat. 7:13

We want our page titles to appear within a paragraph tag, so 7:17

we'll add that here. And as we saw before we can include one or 7:20

more either ERB output tags within the loop as well. 7:25

Their output will change depending on the current values of variables. 7:29

So we'll add an output tag 7:32

With the current page's title, page.title. 7:38

If we save our work and reload the browser, 7:43

we'll see a list of all the page titles. 7:45

So here's our request gets processed again from beginning to end. 7:48

In the config routes.reb file, we've configured a route that sends requests for 7:52

/pages paths to the pages controllers index section. 7:58

That controller's code is in app>controllers>pages_controller.rb. 8:04

There the index method loads a collection of all page model objects from 8:11

the database and assigns the collection to an instance variable. 8:14

By default, the pages_controller then looks within the app > views > pages 8:18

subdirectory for a view template named index.html.erb. 8:23

Within that template, we loop over each of the page objects 8:30

an output in HTML paragraph, holding the page's title. 8:34

Nice work your users can read the list of pages now. 8:39

You set up a route for requests them built a controller view and 8:42

model completely from scratch. 8:45

In the process you hopefully gained a much deeper understanding 8:48

of how rails resources work, still lots more to do though. 8:50

And the next stage we'll continue building out our new pages resource. 8:54

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

Rails Routes and Resources

Populating the View

Related Discussions

Related Discussions