Capítulo 7. Refactorización

La aplicación ya permite crear artículos y comentarios, pero si echas un vistazo al archivo app/views/articles/show.html.erb verás que la plantilla es muy larga y su código es un poco caótico. Para limpiar el código podemos hacer uso de los parciales.

7.1. Renderizando colecciones de parciales

En primer lugar vamos a crear un parcial para mostrar todos los comentarios de un artículo. Crea el archivo app/views/comments/_comment.html.erb y añade el siguiente contenido:

<p>
  <strong>Commenter:</strong>
  <%= comment.commenter %>
</p>
 
<p>
  <strong>Comment:</strong>
  <%= comment.body %>
</p>
Then you can change app/views/articles/show.html.erb to look like the following:

Ahora puedes simplificar el archivo app/views/articles/show.html.erb de la siguiente manera:

<p>
  <strong>Title:</strong>
  <%= @article.title %>
</p>
 
<p>
  <strong>Text:</strong>
  <%= @article.text %>
</p>
 
<h2>Comments</h2>
<%= render @article.comments %>
 
<h2>Add a comment:</h2>
<%= form_for([@article, @article.comments.build]) do |f| %>
  <p>
    <%= f.label :commenter %><br>
    <%= f.text_field :commenter %>
  </p>
  <p>
    <%= f.label :body %><br>
    <%= f.text_area :body %>
  </p>
  <p>
    <%= f.submit %>
  </p>
<% end %>
 
<%= link_to 'Edit Article', edit_article_path(@article) %> |
<%= link_to 'Back to Articles', articles_path %>

Ahora el parcial definido en app/views/comments/_comment.html.erb se utiliza para renderizar cada comentario de la colección @article.comments. Como el método itera sobre @article.comments, asigna cada comentario a una variable local con el mismo nombre que el parcial (en este caso, comment).

7.2. Renderizando un formulario parcial

El siguiente paso consiste en extraer de la plantilla la sección para crear nuevos comentarios. Crea el archivo app/views/comments/_form.html.erb y añade el siguiente contenido:

<%= form_for([@article, @article.comments.build]) do |f| %>
  <p>
    <%= f.label :commenter %><br>
    <%= f.text_field :commenter %>
  </p>
  <p>
    <%= f.label :body %><br>
    <%= f.text_area :body %>
  </p>
  <p>
    <%= f.submit %>
  </p>
<% end %>

Ahora ya puedes refactorizar la plantilla app/views/articles/show.html.erb de la siguiente manera:

<p>
  <strong>Title:</strong>
  <%= @article.title %>
</p>
 
<p>
  <strong>Text:</strong>
  <%= @article.text %>
</p>
 
<h2>Comments</h2>
<%= render @article.comments %>
 
<h2>Add a comment:</h2>
<%= render "comments/form" %>
 
<%= link_to 'Edit Article', edit_article_path(@article) %> |
<%= link_to 'Back to Articles', articles_path %>

El segundo render simplemente indica la plantilla parcial que se quiere renderizar. Rails es capaz de interpretar la sintaxis comments/form de manera correcta, así que se renderiza el parcial _form.html.erb del directorio app/views/comments.

El objeto @article está disponible en cualquier parcial renderizado dentro de la vista, ya que se ha definido como una variable de instancia.