Template, Partials, and Layouts in Rails?

Question

Reviewing some starter courses, I see that the terms are used separately, but I think I only understand layout. To my knowledge the layout is a temporary portion of code (such as a right navigation section, a div containing an ad, or something similar), and a partial is a partial template, but what is a template, and how does it differ from a layout?

Can you give a definition of all three with relations to each other if possible? (ie a template is .... and there are two kinds, partials and layouts.... layouts are specific types of templates or whatever the answer is)

Please correct my assumption if needed...

In Railscasts 294 using pjax, layouts are explicitly differentiated by the random number generator, and this is why I got lost.

I am trying to make a single page accessed by App/Verb/noun, where i can either "capture" or "display" "photos", "videos", "images", etc...(app/captures/photos or app/captures/videos or app/displays/photos etc) and am trying to make just one div change based on when I "capture" different things.... and I am getting lost in the verbiage, or I get really close but am not really understanding what im doing.

Answer 1

I know this is an old question, but I've wondered the same. In the guides, there is no clear explanation of the difference between layouts and views, nor is there a clear explanation of the relationships. To add to the confusion, the term 'template' is often used for both. As someone that was programming Smalltalk in the 90s (but is new to Rails) I deeply understand MVC and understand some of the many ways that it an be implemented -- so my confusion wasn't with that part. There's just a missing piece of context about views, layouts, and templates and how they relate to each other.

Here's how I came to understand it:

Start with a simplistic understanding and example so that the relationship and role of each part is clear:

• a view is 'stuff to be displayed' for a particular controller to respond to an action (which puts it into a particular state). A view is a snapshot of your model at in a particular state, for a particular action (reason/context). It's about information and state, not necessarily about 'looking good'.
• a layout has specific information on how something will be displayed. It may have markup (CSS, HTML, etc.) that provides instructions on how something will be organized (this part up here, that part over there, those go at the bottom, these float at the top; that is navigation information, this is H1, that's H3, this is a definition..) and how it will look (left, right, up, down, red, green, emphasized, flashing, hidden, big, tiny, Helvetica, etc.) Think "Layout and Looking Good"

Say you have a Contract model and controller, and you have a file that defines the view: view/contracts/show.htm.erb:

   <% content_for :full_identification do %>
      <p><%= contract.display_name %>  <%=contract.full_id_number %> </p>
   <% end %>

   <% content_for :summary do %>
      <p> This is the summary for <%= contract.simple_name %>. You hire us. We give you coolness. You pay us.</p>
    <% end %>

  <% content_for :client_info do %>
    <div class="client-info">
      <p><span class="contract-title">Client: <%= contract.client_name%></span></p>
      <p>Address: <%= contract.client_address%></p>
      <p>Phone: <%= contract.client_phone %> </p>
         ... more info about the client.... 
    </div>
  <% end %>

  <% content_for :scope_of_work_statement do %>
    <p class="scope-of-work-statement"><%= contract.scope_of_work%>:</p>
  <% end %>

Your layout file would have more details about the HTML (assuming HTML output) and specifics about how you want things to look. Maybe you have a controller and view that is specific for what (and how) the client sees that contract. You have a layout file for that specific controller and it looks like this: layouts/contracts/contracts_clients_view.htm.erb

 <div class="tab-pane fade in"  >
    <div class="span7 highlight >
      <%= yield :full_identification %>
      <div class="no-breaks reflow" >
        <%= yield :summary%>
      </div>
    </div>

    <div class="span5 scope-of-work-statement">
        <h3>Scope of Work Statement</h3>
        <%= yield :scope_of_work_statement %>
        </div>
    </div>
 </div>

*[This is a totally contrived example so that I can make the relationship between view and layout clear. Obviously things would be modeled and expressed differently in the real world. ]*

The view provides input (the content pieces) to the layout. Views are for controller actions and are named accordingly. (Ex: show, edit, index, etc.)

Layouts are named for the controller used to render them. (Ex: application -- for the ApplicationController, contract -- for a ContractController, contract_customers_view -- for a ContractCustomersViewController)

Where it starts to get tangled is that a view can also have layout information in it. Sometimes there is only the view file (no layout file). And either one can be written in a template language (like ERb or HAML) and thus they can both referred to as a template.

A partial is really just what it says: it's just a piece that can be used (and hopefully re-used). You can take part of a view or layout and re-factor it so that you can re-use it -- now it's a partial. Common uses of partials include the head section, navigation sections (including header, footer, etc.), places where you can re-factor for reusability, and improving coding style and readability by using them for semantic and logical sections. (That's why people liken them to a subroutine.)

Another place where you can get some context about views and layouts and how they're different is in the steps (flow) that ActionView goes through to actually produce output -- to render something using all of these pieces. It is important to understand when a layout is (or isn't) created, for example, so you understand which variables and parameters are or aren't available to you at a particular time. (I'm working with Rails 4, btw.)

Given all of that, now imagine that all of your layout information is in your views, and that your views are written in a template language (ERb, HAML, etc.), and that you've used partials to make everything sing better. You may not have any layout files beyond one main one for your application that has a big yield in it where the real content (generated by your controllers & models) goes.

Hope this helps someone else get a handle on views and layouts. (And I suppose I should suggest putting something like this into the guides.)

Answer 2

What is a layout?

(a) Let's start with the problem we are trying to solve

You might have 1000s of different "pages"/views on your rails app. All 1000 of those pages/views share the same headers, and footer. Now imagine you had to change the footer for your site: you would have to make that change in 1000 pages! What a nightmare: this is not efficient.

You can extract the headers and footers and place it in a layout.html.erb file which can be used by all 1000 pages. In that way: 1 change in one place can propagate to all 1000 of your views/pages. So if you want to change your header/footer you only need to make that change in ONE place, and that will be applied to all views that utilise that relevant template.

# example of a layout
# app/views/layouts/application.html.erb
<!DOCTYPE html>
<-- THIS IS SIMPLIFIED - DO NOT COPY this example -->
<html>
    <div>
      <%= yield %> <-- Notice the yield statement -->
    </div>
</html>

# example of a view:
# users#show.html.erb
<-- This uses the application.html.erb layout -->
<-- Notice how I don't have to create a html tag - because this has already been created in the application.html.erb -->
<div class="container">
  <h1> About <%= @user.full_name %> </h1>
  <br>
  <p>
    <b> Name: </b> <%= @user.full_name %>
  </p>
  <p>
    <b> Organisation: </b> <%= @organisation.name %>
  </p>
  <p>
    <b> Email: </b> <%= @user.email %>
  </p>
</div>

The rails app firstly renders the layout, and then yeilds to the specific views that you want to display. Now you can change the layout and have it propogate through to all your subsequent "views" which utilise the layout.