Ruby on Rails - Viste

A Rails View è un programma ERb che condivide i dati con i controller tramite variabili reciprocamente accessibili.

Se guardi nella directory app / views dell'applicazione libreria, vedrai una sottodirectory per ciascuno dei controller, abbiamo creato: book. Ciascuna di queste sottodirectory è stata creata automaticamente quando il controller con lo stesso nome è stato creato con lo script di generazione.

Rails ti fa sapere che devi creare il file di visualizzazione per ogni nuovo metodo. Ogni metodo definito nel controller deve avere un fileerb file, con lo stesso nome del metodo, per visualizzare i dati che il metodo sta raccogliendo.

Quindi creiamo i file di visualizzazione per tutti i metodi che abbiamo definito in book_controller.rb. Durante l'esecuzione di queste viste, controlla simultaneamente che queste azioni siano applicabili o meno nel database.

Creazione del file di visualizzazione per il metodo elenco

Crea un file chiamato list.html.erbutilizzando il tuo editor di testo preferito e salvalo su app / visualizzazioni / libro. Dopo aver creato e salvato il file, aggiorna il browser web. Dovresti vedere una pagina vuota; se non lo fai, controlla l'ortografia del tuo file e assicurati che sia esattamente lo stesso del metodo del tuo controller.

Ora visualizza il contenuto effettivo. Mettiamo il seguente codice in 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>

Il codice da eseguire è controllare se l'array @books contiene oggetti. Il.blank?restituisce true se l'array è vuoto e false se contiene oggetti. Questo oggetto @books è stato creato nel controller all'interno del metodo list.

Il codice tra i tag <% =%> è un file link_tochiamata al metodo. Il primo parametro di link_to è il testo da visualizzare tra i tag <a>. Il secondo parametro è quale azione viene chiamata quando si fa clic sul collegamento. In questo caso, è il metodo dello spettacolo. Il parametro finale è l'id del libro che viene passato tramite l'oggetto params.

Ora, prova ad aggiornare il browser e dovresti ottenere la seguente schermata perché non abbiamo alcun libro nella nostra libreria.

Creazione di file di visualizzazione per un nuovo metodo

Fino ad ora, non abbiamo nessun libro nella nostra biblioteca. Dobbiamo creare pochi libri nel sistema. Quindi, progettiamo una vista corrispondente al filenew metodo definito in book_controller.rb.

Crea un file chiamato new.html.erb utilizzando il tuo editor di testo preferito e salvalo su app / views / book. Aggiungi il codice seguente al file 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'} %>

Qui form_tagIl metodo interpreta il codice Ruby in un normale tag HTML <form> utilizzando tutte le informazioni fornite. Questo tag, ad esempio, restituisce il seguente HTML:

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

Il prossimo metodo è text_fieldche restituisce un campo di testo <input>. I parametri per text_field sono object e field name. In questo caso l'oggetto è un libro e il nome è il titolo .

Metodo Rails chiamato collection_select, crea un menu di selezione HTML costruito da un array, come quello @books. Ci sono cinque parametri, che sono i seguenti:

• :book- L'oggetto che stai manipolando. In questo caso, è un oggetto libro.

• :subject_id - Il campo che viene compilato quando il libro viene salvato.

• @books - L'array con cui stai lavorando.

• :id- Il valore memorizzato nel database. In termini di HTML, questo è il parametro value del tag <option>.

• :name- L'output che l'utente vede nel menu a discesa. Questo è il valore tra i tag <option>.

Il prossimo utilizzato è submit_tag, che restituisce un pulsante <input> che invia il modulo. Infine, c'è ilend metodo che si traduce semplicemente in </form>.

Vai al tuo browser e visita http://localhost:3000/book/new. Questo ti darà la seguente schermata.

Immettere alcuni dati in questo modulo e quindi fare clic sul pulsante Crea. Qui ho aggiunto i seguenti dettagli nei campi:

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

Quando fai clic sul file Create pulsante, chiamerà il create metodo, che non necessita di alcuna visualizzazione perché questo metodo utilizza entrambi list o newmetodi per visualizzare i risultati. Quindi, quando fai clic sul pulsante Crea, i dati dovrebbero essere inviati correttamente e reindirizzarti alla pagina dell'elenco, in cui ora hai un singolo elemento elencato come segue:

Se fai clic sul collegamento, dovresti vedere un altro errore di modello mancante, poiché non hai ancora creato il file modello per il metodo di visualizzazione.

Creazione del file di visualizzazione per il metodo show

Questo metodo visualizzerà i dettagli completi su qualsiasi libro disponibile nella libreria. Crea un file show.html.erb in app / views / book e popolalo con il seguente codice:

<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'} %>

Questa è la prima volta che hai sfruttato appieno le associazioni, che ti consentono di estrarre facilmente i dati dagli oggetti correlati.

Il formato utilizzato è @variable.relatedObject.column. In questo caso, puoi estrarre il valore del nome del soggetto tramite la variabile @book utilizzando ilbelongs_toassociazioni. Se fai clic su un record elencato, ti verrà mostrata la schermata seguente.

Creazione del file di visualizzazione per il metodo di modifica

Crea un nuovo file chiamato edit.html.erb e salvalo in app / views / book. Popolarlo con il codice seguente:

<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' } %>

Questo codice è molto simile a new metodo tranne l'azione da aggiornare invece di creare e definire un id.

In questo scenario, abbiamo usato form_fortag per l'azione del modulo. Funzionerà meglio diform_tag. Perché perché creerà facilmente interazione con il Modello. Pertanto è meglio utilizzare il tag form_for ogni volta che è necessaria l'interazione tra il modello e i campi del modulo.

A questo punto, abbiamo bisogno di alcune modifiche nel file list method'svedi il file. Vai all'elemento <li> </li> e modificalo in modo che abbia il seguente aspetto:

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

Ora prova a sfogliare i libri utilizzando il http://localhost:3000/book/list. Ti darà l'elenco di tutti i libri insieme a Editopzione. Quando fai clic sull'opzione Modifica, avrai la schermata successiva come segue:

Ora modifichi queste informazioni e poi fai clic sul pulsante Salva modifiche . Ciò si tradurrà in una chiamata aupdatedisponibile nel file del controller e aggiornerà tutti gli attributi modificati. Si noti che il fileupdate metodo non ha bisogno di alcun file di visualizzazione perché utilizza entrambi show o edit metodi per mostrare i suoi risultati.

Creazione del file di visualizzazione per il metodo di eliminazione

Rimuovere le informazioni da un database utilizzando Ruby on Rails è quasi troppo facile. Non è necessario scrivere alcun codice di visualizzazione per il metodo di eliminazione perché questo metodo sta utilizzandolistmetodo per visualizzare il risultato. Quindi, modifichiamo di nuovo list.html.erb e aggiungiamo un link di eliminazione.

Vai all'elemento <li> </li> e modificalo in modo che abbia il seguente aspetto:

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

Il :confirmIl parametro presenta una finestra di conferma JavaScript che chiede se si desidera veramente eseguire l'azione. Se l'utente fa clic su OK, l'azione procede e l'elemento viene eliminato.

Ora prova a sfogliare i libri usando http://localhost:3000/book/list. Ti darà un elenco di tutti i libri insieme a Edit e Delete opzioni come segue:

Ora utilizzando l'opzione Elimina, puoi eliminare qualsiasi record elencato.

Creazione del file di visualizzazione per il metodo show_subjects

Crea un nuovo file, show_subjects.html.erb, nella directory app / views / book e aggiungi il seguente codice ad esso -

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

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

Stai sfruttando le associazioni ripetendo i numerosi elenchi di libri di un singolo argomento.

Ora modifica la riga Oggetto: di show.html.erb in modo che l'elenco degli argomenti mostri un collegamento.

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

Questo produrrà un elenco di argomenti nella pagina dell'indice, in modo che gli utenti possano accedervi direttamente.

Modificare list.html.erb per aggiungere quanto segue all'inizio del file:

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

Ora prova a sfogliare i libri utilizzando http: // localhost: 3000 / book / list. Mostrerà tutti gli argomenti con i collegamenti in modo da poter sfogliare tutti i libri relativi a quell'argomento.

Cosa c'è dopo?

Spero che ora ti senta a tuo agio con tutte le operazioni di Rails.

Il prossimo capitolo spiega come usare Layoutsper mettere i tuoi dati in un modo migliore. Ti mostreremo come usare i CSS nelle tue applicazioni Rails.