Preview

Start a free Courses trial
to watch this video

Rendering Associated Models Using Partials

4:29 with Jay McGavren

You've got a working list of comments for each Post. Since each comment has only two attributes, this works okay. But once you start working with more complicated models, sticking their HTML code straight into their associated model's view may not work so well. We've used partials in previous courses to use the same HTML form code to both create and edit model objects. Let's try using partials here to render the HTML that shows a model.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Let's try using partials to render the HTML that shows a comment.

Move comment HTML to partial template: app/views/comments/_comment.html.erb

<div>
  <strong><%= comment.name %> says:</strong>
  <%= comment.content %>
</div>

Underscore in name indicates this is a partial.
Note this code still expects a local variable named comment. We'll leave that and set it when we render the partial.

Back in views/posts/show.html.erb, we can call render with a partial: argument to render the partial:

  <% @post.comments.each do |comment| %>
    <%= render partial: "comments/comment", locals: {comment: comment} %>
  <% end %>

render will look in the posts/ by default, so we need to add comments/ on front of partial name
We leave underscore out of file name in partial: argument, .html.erb is added automatically
locals: argument takes a hash with the names and values of local variables to set when rendering partial

There's a simpler way to do the same thing: we can loop through a collection and render a partial for each using render's collection: argument:

  <%= render partial: "comments/comment", collection: @post.comments, as: :comment %>

as: argument takes symbol with name of local variable to assign

The collection: argument automatically assigns current member to local variable with same name as the partial, so we can remove as: :comment:

  <%= render partial: "comments/comment", collection: @post.comments %>

And here's the ultimate shortcut... we can pass just @post.comments to render.

  <%= render @post.comments %>

render realizes you're passing it a collection, so it's as if you're passing it as the collection: argument.
Also no need for a partial: argument. render sees Comment objects in the collection, so it looks in the views/comments folder for a partial named _comment.

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.

You've got a working list of comments for each post. 0:00

Since each comment has only two attributes, this works okay. 0:03

But once you start working with more complicated models, sticking their 0:07

HTML code straight into the associated model's view may not work so well. 0:10

We've used partials in previous courses to use the same 0:16

HTML form code to both create and edit model objects. 0:19

Let's try using partials here to render the HTML that shows a model. 0:23

So let's cut this code that shows a model out of our post show view. 0:28

And we're going to create a new folder within our views folder. 0:33

We're gonna name that comments, then within that we're gonna create a new file. 0:39

Because it's a partial, we're going to start the file name with an underscore and 0:45

then we'll say _comment.html.erb. 0:50

This is going to be partial that shows a comment. 0:53

And we're going to paste the code that we cut out of the post show view into this 0:57

partial. 1:01

Let's save that and we can close it for now. 1:05

Now back here in the posts show view, 1:09

we can add code to render the comment partial. 1:11

So we'll add a call to the render method. 1:14

And we'll give it the argument partial, followed by a colon. 1:19

Then we need to specify the partial file that it should render. 1:23

Render will look in the post folder by default. 1:26

So we need to add comments/ on the front of the partial name, 1:29

that'll direct it to look in the views comments folder. 1:33

The actual filename is _comment.html.erb. 1:37

But we can leave the underscore off of the file name. 1:41

Rails will add that automatically, since it knows we're rendering a partial. 1:44

So we say comment, and then the .html.erb is added automatically as well. 1:47

We need to add one more argument to our render method, the locals argument. 1:54

This takes a hash with the names and 2:00

values of local variables to set when rendering the partial. 2:02

We're going to set one local variable, comment, and 2:05

we'll pass our current comment as the value of that comment variable. 2:10

That's it for our call to render, so we'll close out the erb tag. 2:14

Let's save this and check it out in our browser to see if it still works. 2:18

We get the exact same result. 2:23

The difference is that, for each comment, Rails went through and 2:25

rendered the comment partial. 2:27

We still have an each loop that processes each comment in 2:30

the post comments collection. 2:32

If we want, we can do the same thing using the render methods collection argument. 2:34

We add collection: and we specify that 2:41

the collection we wanna render is post.comments. 2:45

When we're using the collection argument instead of the locals argument, 2:50

we can use the as argument. 2:54

Which will specify a variable that the current member of the collection should be 2:56

assigned to. 2:59

So this will take the current comment and assign it to the comment local variable. 3:00

Let's try saving that and we render our view again. 3:06

And again we get the same result, but this time with much less code. 3:10

But actually, we don't even need the as argument here. 3:15

The collection argument automatically assigns the current member of 3:18

the collection to a local variable with the same name as the partial. 3:21

Since the partial is named comment, 3:25

that means it'll be assigned to a comment variable. 3:27

So let's remove the as argument and try rendering it again. 3:30

And we get the same results again. 3:33

And now for the ultimate shortcut, we can pass just post.comments to render. 3:36

Render realizes that you're passing it a collection. 3:44

So it's as if you're passing it as the collection argument. 3:47

Also there's no need for a partial argument. 3:50

Render sees that the collection is full of comment model objects, so 3:53

it looks in the views comments folder for a partial named comment. 3:56

So with this much shorter code, let's try reloading our browser. 4:00

And again, we get the exact same result. 4:04

A word of warning, 4:06

do not rely on this magic called a render without understanding it. 4:07

It's important to know about the partial, collection, locals, and 4:11

as arguments to render. 4:14

Because you'll need them when you want to render a partial using a file path or 4:16

variables that don't match the defaults. 4:19

But if you follow the conventions when setting up a partial, 4:22

you can use shortcuts like this to make your template code look much cleaner. 4:25

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

Active Record Associations in Rails

Rendering Associated Models Using Partials

Related Discussions

Related Discussions