Introduction to Partials in Rails 5
Partials in Rails are a great way to share view components across multiple pages. Additionally, partials help make it possible to limit duplicate view code in an application. In this guide we'll walk through an introduction to Rails partials and refactor our navigation bar so that it can be shared across multiple layouts.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Starting back in our pivotal tracker dashboard we can see that our next task is implementing partial for the nav bar. Before we do that let's talk about what a partial is. A partial I think is named very well, It is a partial piece of code that can be shared by view elements or by pages on your site. Let's take a look at a practical example.

Open up sublime text and let's open up our application.html.erb file, blog.html.erb and our portfolio.html.erb. Right here you may notice something kind of unique. We have a nav bar here on all three pages, they are slightly different where they are called but the code itself is the same on each spot. That is considered a poor practice.

Let's take the example of saying that we want to add one more page, say we want to add something in addition to about, we would have to come make my change in all three pages. That would be a really bad way of developing.

What we can do is we can leverage partials in rails. A partial is a file, technically we already have used a partial. We haven't really gone into detail on what they are.

Let's take a look at another example. If we go to our blogs directory notice right here for form, see how it has a little underscore right in front of the file name? That means that this is a partial and if you look at the edit file, even though edit shows a form it doesn't actually have a form here. If we look at new, new renders a form but the form isn't here. This little piece of code right here where it says <%= render 'form', blog: @blog %>, this is calling a partial. It's calling the form which is a partial which allows us to have this form element that is able to be shared by two pages.

That means that if we make a change to the form, say we come in and we add a new parameter for our blog, we only need to make that change in one spot as compared with two. If you switch over to the portfolios edit and new page, you can see how these are different. if we made a change on one we'd have to go and make a change on another one. I did that on purpose because I didn't want to implement a partial for that until we talked about partials.

For right now, we're going to take what I think is an easy example, which is to refactor and pull out our nav element. Then we can share this across all of our layouts.

First, think is good from a code organization standpoint, in views I'm going to right-click and say new folder. I'm going to create a new folder called "Shared" at the bottom we now have a shared directory in the views directory. I'm going to click a new file save and then type underscore (typing the underscore is required for a partial this is the way that rails knows that this is a partial and not a pure HTML template.) I'm going to say _nav.html.erb and what we can do is actually just bring out this element we can paste it in and hit save

large

Now where all of that code was, I can say this <%= render "shared/nav %>. Partials always have to be view elements, we don't have to say app/views/shared. Since partials are always going to be in the views directory, we can just say shared and then from. Notice when you are calling this you don't have to say _ you can simply say nav. Rails will know because we're calling render, this is something that specifically is used for partials.

Notice how this is a little bit different than the blogs form partial. If you come to blogs edit, notice how this has render form and then it passes in blog. We're going to get into what this is later, this is the ability to pass data into a partial but ours doesn't need data. All we need to do is say I want you to grab this file and I want you to just slide it in right here. This is kind of similar to the way that yield works in the sense that we're grabbing a small bit of HTML and we're just sliding in here and when the page renders the ruby server is going to simply slide that HTML and process that for us.

Update blog.html and portfolio.html to include render partial.

Let's start up the rails server and see if all of this is working.

Switching to the browser, refresh and that looks like it's working. Click about, contact and blog that's working. Notice our partial being called down here where we wanted it to be, click on portfolios and that switches, it is still rendering all of our custom templates.

Say that we want to change "about" to "about me" (change it in the partial) and hit save, come back it is now said about me right here and it's populated on every location. We only had to make the change right here and then it took care of everything else for us.

that is an introduction to partial in rails.

  • git status
  • git add .
  • git commit -m "Implemented partial for the nav component"
  • git push origin view

I'm not going to move on to integrating view helpers yet.

In the next guide, I want to go through and show you how you can use a little bit more of an advanced partial where we can actually pass data into a form. I'll see you then.

Resources