Partials allow us to easily organize and reuse our view code in a Rails application. Partial file names typically start with an underscore (_) and generally end in the .html.erb extension as our views. The .erb extension may vary depending on template engine we are using.
Basics of Partial
There can be controller specific partials, i.e. in app/views/ or layout specific partials in the app/views/layouts folder.
For example, lets say we have a model called Posts in a blog we are writing. In our Posts controller we want to have both a new method and edit method. Rather than having two separate forms that need to be independently maintained and updated, we can have just one partial and include it in both views.
app/views/posts/_form.html.erb:
<%= form_for(@post) do |f| %>
<% if @post.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved:</h2>
<ul>
<% @post.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :title %><br />
<%= f.text_field :title %>
</div>
<div class="field">
<%= f.label :body %><br />
<%= f.text_area :body %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
We can use a partial in the views using the [render][1] method.
app/views/posts/new.html.erb:
<h1>New post</h1>
<%= render 'form' %>
<%= link_to 'Back', posts_path %>
app/views/posts/edit.html.erb:
<h1>Editing post</h1>
<%= render 'form' %>
<%= link_to 'Back', posts_path %>
Now if later on we have to add any extra form fields then we can just make the change in form partial so that it is visible in both new new and edit form.
Another example of partial is for organizing code in the layout. We can do things like moving the html header code to it's own file. This is especially useful for larger layouts with hundreds of lines of code. To do this we can simply create a new partial and move the code to it. As for example, the code below creates a partial called _html_header.html.erb and renders it from within the application layout.
<head>
<title><%= title %></title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
app/views/layouts/application.html.erb:
<!DOCTYPE html>
<html>
<%= render 'layouts/html_header' %>
<body>
<%= yield %>
</body>
</html>
We can also have different layout for different user but with same css and js files then also we can use this methodology.
Passing variables to partial:
In the previous example we can pass the title value dynamically using this syntax while rendering the partial.
<%= render 'html_header', title: "Blog App" %>
or
<%= render partial: "html_header", locals: { title: "Blog App" } %>
Rendering a collection of partials
It is possible to render a partial for each objects in a collection. First, let's say we have a Comment model. We can simply create a view called _comment.html.erb, add in code to display the comment, and make a single call to render the collection of comments. This is accomplished by passing the instance variable itself as an argument to render: <%= render @comments %>. Rails will automatically derive the model name from the collection and find the appropriate partial and render it. An example is below
app/views/comments/_comment.html.erb:
Content: <%= comment.content %>
app/views/comments/index.html.erb:
<%= render @comments %>
:as and :object options
While passing objects to partial we can use the :as and :object options.
For example we have a partial _account.html.erb where we need to pass a object @buyer to local variable account. We will do it like this:
<%= render partial: "account", object: @buyer %>
which is equivalent to:
<%= render partial: "account", locals: { account: @buyer } %>
If we want to change the name of the local variable then we will use :as option like this
<%= render partial: "account", object: @buyer, as: 'user' %>
which is equivalent to:
<%= render partial: "account", locals: { user: @buyer } %>
0 Comment(s)