#8 Layouts and content_for

Mar 21, 2007 | 3 minutes | Views

If you want to change something in the layout on a per-template basis, content_for is your answer! This allows templates to specify view code that can be placed anywhere in a layout.

Click to Play Video ▶

Download:
mp4Full Size H.264 Video (5.9 MB)
m4vSmaller H.264 Video (3.9 MB)
webmFull Size VP8 Video (10.8 MB)
ogvFull Size Theora Video (6.63 MB)

Debajo tenemos un archivo layout de aplicación y una acción index:

          ruby
        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Todo List</title>
    <%= stylesheet_link_tag 'application' %>
  </head>
  <body>
    <div id="container">
      <h1>Todo List</h1>
      <%= yield %>
    </div>
  </body>
</html>

application.rhtml^[1]

          ruby
        
<h2>Projects</h2>
<ul>
<% for project in @projects %>
  <li><%= project.name %></li>
<% end %>
</ul>

index.rhtml ^[1]

Cuando se genera la acción index, se genera dentro del archivo layout (Ver episodio anterior para más detalles acerca de los layouts). Pero, ¿y si queremos más control sobre el layout y queremos personalizarlo basado en el template que está siendo generado? Digamos que queremos utilizar un archivo CSS personalizado en el template de la acción index. La solución es utilizar un método helper llamado content_for en nuestro template. content_for toma un símbolo como identificador, en este caso :head, y un bloque. El código colocado dentro del bloque será almacenado para su posterior uso y no aparecerá dentro del template.

          ruby
        
<% content_for :head do %>
  <%= stylesheet_link_tag 'projects' %>
<% end %>
<h2>Projects</h2>
<ul>
<% for project in @projects %>
  <li><%= project.name %></li>
<% end %>
</ul>

index.rhtml^[1]

Este cambio no va a generar ningún cambio de por sí, ya que no estamos mostrando el contenido de content_for. Lo que necesitamos hacer a continuación es mostrar la salida en algún lugar en el layout. Esto puede hacerse realizando una llamada a yield con el símbolo que le dimos al content_for. Entonces, al agregar yield :head en un bloque ERB a la sección del encabezado de nuestro layout, el código dentro de content_for :head en nuestro template será generado en ese lugar.

          ruby
        
...
  <head>
    <title>Todo List</title>
    <%= stylesheet_link_tag 'project' %>
    <%= yield :head %>
  </head>
...

Observando al código fuente de la página, vemos que la referencia a la hoja de estilo de nuestro bloque content_for ha sido agregada a la página.

The page's source with the stylesheet added

content_for provee una forma realmente útil de cambiar el contenido de un layout que depende de una acción. Así como se puede utilizar para agregar hojas de estilo, también se puede utilizar para mostrar barras de menú, barras laterales o cualquier otro tipo de contenido que deseemos que aparezca en cierta acción.

Notas

Para Rails 2 y versiones superiores la extensión del archivo debería ser .html.erb en vez de .rhtml.