#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)

Ci-dessous nous avons le fichier d'un layout applicatif et une action 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]

Quand l'action index est rendue, elle sera rendu au sein du layout. (Voir l'épisode précédent pour plus de détails concernant les layouts). Mais que faire si nous voulons plus de contrôle sur le layout et voulons le personnaliser en se basant sur le gabarit qui sera rendu ? Disons que nous voulons utiliser un fichier CSS alétoire dans le gabarit index. La solution est d'utiliser un helper appelé content_for dans notre gabarit. content_for prend un symbole comme identifiant, dans ce cas :head, et un bloc. Le code placé à l'intérieur du bloc sera stocké pour une utilisation postérieure et ne sera pas rendu dans le gabarit.

          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]

Cette modification ne fera aucune différence puisque nous ne produisons pas le contenu de content_for. Ce dont nous avons besoin ensuite est de produire le contenu quelque part dans le layout. On peut le faire en appelant yield avec le symbole que nous avons donné à content_for. Ainsi en ajoutant yield :head dans le bloc ERB à la section headde notre layout, le code à l'intérieur du bloc content_for :head dans notre template sera rendu ici.

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

En regardant la source de notre page, nous pouvons voir que la référence à notre feuille de style dans le bloc content_for a été ajoutée à la page.

The page's source with the stylesheet added

content_for fourni un moyen très utile pour changer le contenu de notre layout en fonction de notre action. Ainsi qu'ajouter des feuilles de styles, ça peut être utiliser pour afficher des menus, barres de navigation ou tout autre contenu que nous voulons faire apparaître en fonction de certaines actions.

Notes

Pour Rails 2 et supérieur, l'extension devrait être .html.erb plutôt que .rhtml.