Ruby on Rails - Vistas

A Rails View es un programa ERb que comparte datos con controladores a través de variables de acceso mutuo.

Si busca en el directorio app / views de la aplicación de la biblioteca, verá un subdirectorio para cada uno de los controladores que hemos creado: book. Cada uno de estos subdirectorios se creó automáticamente cuando se creó el controlador con el mismo nombre con el script de generación.

Rails le permite saber que necesita crear el archivo de vista para cada método nuevo. Cada método que defina en el controlador debe tener un correspondienteerb archivo, con el mismo nombre que el método, para mostrar los datos que está recopilando el método.

Así que creemos archivos de vista para todos los métodos que hemos definido en book_controller.rb. Mientras ejecuta estas vistas, compruebe simultáneamente si estas acciones son aplicables en la base de datos o no.

Crear archivo de vista para el método de lista

Crea un archivo llamado list.html.erbusando su editor de texto favorito y guárdelo en la aplicación / vistas / libro. Después de crear y guardar el archivo, actualice su navegador web. Debería ver una página en blanco; si no lo hace, verifique la ortografía de su archivo y asegúrese de que sea exactamente el mismo que el método de su controlador.

Ahora, muestre el contenido real. Pongamos el siguiente código en list.html.erb.

<% if @books.blank? %>
<p>There are not any books currently in the system.</p>
<% else %>
<p>These are the current books in our system</p>

<ul id = "books">
   <% @books.each do |c| %>
   <li><%= link_to c.title, {:action => 'show', :id => c.id} -%></li>
   <% end %>
</ul>

<% end %>
<p><%= link_to "Add new Book", {:action => 'new' }%></p>

El código a ejecutar es verificar si el arreglo @books tiene algún objeto. los.blank?El método devuelve verdadero si la matriz está vacía y falso si contiene algún objeto. Este objeto @books se creó en el controlador dentro del método de lista.

El código entre las etiquetas <% =%> es un link_tollamada al método. El primer parámetro de link_to es el texto que se mostrará entre las etiquetas <a>. El segundo parámetro es la acción que se llama cuando se hace clic en el enlace. En este caso, es el método show. El parámetro final es la identificación del libro que se pasa a través del objeto params.

Ahora, intente actualizar su navegador y debería aparecer la siguiente pantalla porque no tenemos ningún libro en nuestra biblioteca.

Crear archivo de vista para un nuevo método

Hasta ahora, no tenemos ningún libro en nuestra biblioteca. Tenemos que crear pocos libros en el sistema. Entonces, diseñemos una vista correspondiente a lanew método definido en book_controller.rb.

Cree un archivo llamado new.html.erb con su editor de texto favorito y guárdelo en app / views / book. Agregue el siguiente código al archivo new.html.erb.

<h1>Add new book</h1>

<%= form_tag :action => 'create' do %>
<p><label for = "book_title">Title</label>:

<%= text_field 'books', 'title' %></p>
<p><label for = "book_price">Price</label>:

<%= text_field 'books', 'price' %></p>
<p><label for = "book_subject_id">Subject</label>:

<%= collection_select(:books, :subject_id, @subjects, :id, :name, prompt: true) %></p>
<p><label for = "book_description">Description</label><br/>

<%= text_area 'books', 'description' %></p>
<%= submit_tag "Create" %>

<% end -%>
<%= link_to 'Back', {:action => 'list'} %>

aquí form_tagEl método interpreta el código Ruby en una etiqueta <form> HTML normal utilizando toda la información que se le proporciona. Esta etiqueta, por ejemplo, genera el siguiente HTML:

<form action = "/book/create" method = "post">

El siguiente método es text_fieldque genera un campo de texto <input>. Los parámetros para text_field son el objeto y el nombre del campo. En este caso, el objeto es libro y el nombre es título .

Método de rieles llamado collection_select, crea un menú de selección HTML construido a partir de una matriz, como @books. Hay cinco parámetros, que son los siguientes:

:book- El objeto que está manipulando. En este caso, es un objeto de libro.
:subject_id - El campo que se completa cuando se guarda el libro.
@books - La matriz con la que está trabajando.
:id- El valor que se almacena en la base de datos. En términos de HTML, este es el parámetro de valor de la etiqueta <option>.
:name- La salida que el usuario ve en el menú desplegable. Este es el valor entre las etiquetas <option>.

El siguiente usado es submit_tag, que genera un botón <input> que envía el formulario. Finalmente, está elend método que simplemente se traduce en </form>.

Vaya a su navegador y visite http://localhost:3000/book/new. Esto le dará la siguiente pantalla.

Ingrese algunos datos en este formulario y luego haga clic en el botón Crear. Aquí he agregado los siguientes detalles en los campos:

Title: Advance Physics
Price: 390
Subject: Physics
Description: This is test to create new book

Cuando haces clic en el Create botón, llamará al create método, que no necesita ninguna vista porque este método utiliza list o newmétodos para ver los resultados. Por lo tanto, cuando hace clic en el botón Crear, los datos deben enviarse correctamente y redirigirlo a la página de la lista, en la que ahora tiene un solo elemento enumerado de la siguiente manera:

Si hace clic en el enlace, debería ver que falta otra plantilla, ya que aún no ha creado el archivo de plantilla para el método show.

Crear archivo de vista para el método show

Este método mostrará el detalle completo sobre cualquier libro disponible en la biblioteca. Cree un archivo show.html.erb en app / views / book y rellénelo con el siguiente código:

<h1><%= @book.title %></h1>

<p>
   <strong>Price: </strong> $<%= @book.price %><br />
   <strong>Subject :</strong> <%= @book.subject.name %><br />
   <strong>Created Date:</strong> <%= @book.created_at %><br />
</p>

<p><%= @book.description %></p>

<hr />

<%= link_to 'Back', {:action => 'list'} %>

Esta es la primera vez que aprovecha al máximo las asociaciones, que le permiten extraer fácilmente datos de objetos relacionados.

El formato utilizado es @variable.relatedObject.column. En este caso, puede extraer el valor del nombre del sujeto a través de la variable @book usando elbelongs_toasociaciones. Si hace clic en cualquier registro de la lista, se le mostrará la siguiente pantalla.

Crear archivo de vista para el método de edición

Cree un nuevo archivo llamado edit.html.erb y guárdelo en app / views / book. Rellénelo con el siguiente código:

<h1>Edit Book Detail</h1>

<%= form_for @book, :url =>{:action => "update", :id =>@book} do |f| %>

<p>Title: <%= f.text_field 'title' %></p>
<p>Price: <%= f.text_field  'price' %></p>
<p>Subject: <%= f.collection_select :subject_id, Subject.all, :id, :name %></p>
<p>Description<br/>

<%= f.text_area 'description' %></p>
<%= f.submit "Save changes" %>
<% end %>

<%= link_to 'Back', {:action => 'list' } %>

Este código es muy similar al new método excepto la acción que se actualizará en lugar de crear y definir una identificación.

En este escenario, usamos form_foretiqueta para la acción del formulario. Funcionará mejor queform_tag. Por qué, porque creará interacción con el modelo fácilmente. Por lo tanto, es mejor usar la etiqueta form_for siempre que necesite interacción entre el modelo y los campos del formulario.

En este punto, necesitamos algunas modificaciones en el list method'sver archivo. Vaya al elemento <li> </li> y modifíquelo para que tenga el siguiente aspecto:

<li>
   <%= link_to c.title, {:action => "show", :id => c.id} -%>
   <b> <%= link_to 'Edit', {:action => "edit",
   :id => c.id} %></b>
</li>

Ahora, intente buscar libros con el http://localhost:3000/book/list. Le dará la lista de todos los libros junto con Editopción. Cuando haga clic en la opción Editar, tendrá la siguiente pantalla de la siguiente manera:

Ahora, edite esta información y luego haga clic en el botón Guardar cambios . Esto resultará en una llamada aupdatemétodo disponible en el archivo del controlador y actualizará todos los atributos cambiados. Note que elupdate El método no necesita ningún archivo de vista porque usa show o edit métodos para mostrar sus resultados.

Crear archivo de vista para el método de eliminación

Eliminar información de una base de datos usando Ruby on Rails es casi demasiado fácil. No es necesario que escriba ningún código de vista para el método de eliminación porque este método utilizalistmétodo para mostrar el resultado. Entonces, simplemente modifiquemos list.html.erb nuevamente y agreguemos un enlace de eliminación.

Vaya al elemento <li> </li> y modifíquelo para que tenga el siguiente aspecto:

<li>
   <%= link_to c.title, {:action => 'show', :id => c.id} -%>
   <b> <%= link_to 'Edit', {:action => 'edit', :id => c.id} %></b>
   <b> <%= link_to "Delete", {:action => 'delete', :id => c.id},
      :confirm => "Are you sure you want to delete this item?" %></b>
</li>

los :confirmEl parámetro presenta un cuadro de confirmación de JavaScript que le pregunta si realmente desea realizar la acción. Si el usuario hace clic en Aceptar, la acción continúa y el elemento se elimina.

Ahora, intente buscar libros usando http://localhost:3000/book/list. Le dará una lista de todos los libros junto con Edit y Delete opciones de la siguiente manera:

Ahora, con la opción Eliminar, puede eliminar cualquier registro de la lista.

Crear archivo de vista para el método show_subjects

Cree un nuevo archivo, show_subjects.html.erb, en el directorio app / views / book y agréguele el siguiente código:

<h1><%= @subject.name -%></h1>

<ul>
   <% @subject.books.each do |c| %>
   <li><%= link_to c.title, :action => "show", :id => c.id -%></li>
   <% end %>
</ul>

Aprovecha las asociaciones al iterar a través de las listas de libros de un solo tema.

Ahora modifique la línea Asunto: de show.html.erb para que la lista de temas muestre un enlace.

<strong>Subject: </strong> <%= link_to @book.subject.name,
:action => "show_subjects", :id => @book.subject.id %><br />

Esto generará una lista de temas en la página de índice, para que los usuarios puedan acceder a ellos directamente.

Modificar list.html.erb para agregar lo siguiente al principio del archivo:

<ul id = "subjects">
   <% Subject.find(:all).each do |c| %>
   <li><%= link_to c.name, :action => "show_subjects", :id => c.id %></li>
   <% end %>
</ul>

Ahora intente buscar libros usando http: // localhost: 3000 / book / list. Mostrará todos los temas con enlaces para que pueda navegar por todos los libros relacionados con ese tema.

¿Lo que sigue?

Espero que ahora se sienta cómodo con todas las operaciones de Rails.

El siguiente capítulo explica cómo usar Layoutspara poner sus datos de una mejor manera. Le mostraremos cómo utilizar CSS en sus aplicaciones Rails.

↰ Previous page Next page ↱