極客書

Ruby on Rails - Views

Rails視圖是一個ERb程序，它通過相互訪問的變量與控制器共享數據。

如果您查看庫應用程式的app/views目錄，您將看到每個控制器的一個子目錄，我們已經創建了：book。這些子目錄中的每一個子目錄都是在使用generate腳本創建同名控制器時自動創建的。

Rails讓您知道需要爲每個新方法創建視圖文件。在控制器中定義的每個方法都需要有一個與該方法同名的對應的erb文件，以顯示該方法正在收集的數據。

因此，讓我們爲book_controller.rb中定義的所有方法創建視圖文件。在執行這些視圖時，同時檢查這些操作是否適用於資料庫。

Creating View File for list Method

使用您喜愛的文本編輯器創建一個名爲list.html.erb的文件，並將其保存到app/views/book。創建並保存文件後，請刷新web瀏覽器。您應該看到一個空白頁;如果沒有，請檢查文件的拼寫，並確保它與控制器的方法完全相同。

現在，顯示實際內容。讓我們將以下代碼放入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>

要執行的代碼是檢查@books數組中是否有任何對象。空白？如果數組爲空，則方法返回true;如果數組包含任何對象，則返回false。這個@books對象是在list方法內的controller中創建的。

標記之間的代碼是一個連結到方法調用。link_to的第一個參數是要在<a>標記之間顯示的文本。第二個參數是單擊連結時調用的操作。在本例中，它是show方法。最後一個參數是通過params對象傳遞的圖書的id。

現在，嘗試刷新您的瀏覽器，您應該會看到以下螢幕，因爲我們的庫中沒有任何書籍。

No Book Message

Creating View File for new Method

到現在爲止，我們的圖書館裡還沒有書。我們必須在系統中創建一些書籍。因此，讓我們設計一個視圖，它對應於book\controller.rb中定義的new方法。

使用您喜愛的文本編輯器創建一個名爲new.html.erb的文件，並將其保存到app/views/book。將以下代碼添加到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'} %>

在這裡，form_tag方法使用提供給它的所有信息將Ruby代碼解釋爲一個常規的HTML<form>標記。例如，這個標記輸出以下HTML−

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

下一種方法是輸出文本欄位的文本欄位。文本欄位的參數是對象和欄位名。在本例中，對象是book，名稱是title。

名爲collection\u select的Rails方法，創建一個從數組（如@books one）構建的HTML選擇菜單。有五個參數，如下所示;

  • ：book−正在操作的對象。在這種情況下，它是一個圖書對象。

  • ：subject_id−保存書本時填充的欄位。

  • @books−正在使用的數組。

  • ：id−存儲在資料庫中的值。就HTML而言，這是<option>標記的值參數。

  • ：name−用戶在下拉菜單中看到的輸出。這是<選項>標記之間的值。

下一個使用的是提交標記，它輸出提交表單的「輸入」按鈕。最後，還有一個end方法，它簡單地轉換爲</form>。

轉到瀏覽器並訪問http://localhost:3000/book/new。這將顯示以下螢幕。

New Book

在此表單中輸入一些數據，然後單擊「創建」按鈕。在這裡，我在欄位中添加了以下詳細信息&負;

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

當您單擊Create按鈕時，它將調用Create方法，該方法不需要任何視圖，因爲該方法使用list或new方法來查看結果。因此，當您單擊Create按鈕時，數據應該成功提交並重定向到list頁面，在該頁面中，您現在有一個項目列示如下−

Create Book

如果單擊該連結，您將看到另一個模板丟失錯誤，因爲您尚未爲show method創建模板文件。

Creating View File for show Method

此方法將顯示有關庫中任何可用圖書的完整詳細信息。在app/views/book下創建一個show.html.erb文件，並用以下代碼填充它−

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

這是您第一次充分利用關聯，它使您能夠輕鬆地從相關對象中提取數據。

使用的格式是@variable.relatedObject.column。在本例中，您可以使用歸屬於關聯通過@book變量拉取主題的名稱值。如果單擊任何列出的記錄，它將顯示以下螢幕。

Show Book

Creating View File for edit Method

創建一個名爲edit.html.erb的新文件並將其保存在app/views/book中。用以下代碼填充它−

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

此代碼與new方法非常相似，除了要更新的操作，而不是創建和定義id。

在這個場景中，我們使用form_for標記表單操作。它的性能將優於form_tag。爲什麼，因爲它會很容易地創建與模型的交互。因此，當您需要模型和表單欄位之間的交互時，最好使用form_作爲標記。

此時，我們需要對list方法的視圖文件進行一些修改。轉到<li><li>元素並將其修改爲如下所示;

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

現在，嘗試使用http://localhost:3000/book/list來瀏覽書籍。它將爲您提供所有書籍的列表以及Edit選項。單擊「編輯」選項時，將出現下一個螢幕，如下所示−

Edit Book

現在，您可以編輯此信息，然後單擊保存更改按鈕。這將導致調用控制器文件中可用的update方法，並更新所有更改的屬性。注意，update方法不需要任何視圖文件，因爲它使用show或edit方法來顯示其結果。

Creating View File for delete Method

使用Ruby on Rails從資料庫中刪除信息幾乎太容易了。您不需要爲delete方法編寫任何視圖代碼，因爲此方法使用list方法來顯示結果。所以，讓我們再次修改list.html.erb並添加一個刪除連結。

轉到<li><li>元素並將其修改爲如下所示;

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

：confirm參數顯示一個JavaScript確認框，詢問您是否真的要執行該操作。如果用戶單擊「確定」，則操作將繼續，並刪除該項。

現在，嘗試使用http://localhost:3000/book/list瀏覽書籍。它將爲您提供所有書籍的列表以及編輯和刪除選項，如下所示−

Delete Book

現在使用Delete選項，您可以刪除任何列出的記錄。

Creating View File for show_subjects Method

在app/views/book目錄中創建一個新文件show_subjects.html.erb，並向其中添加以下代碼−

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

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

通過遍歷單個主題的多個圖書列表，可以利用關聯。

現在修改show.html.erb的Subject:line，以便Subject列表顯示一個連結。

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

這將在索引頁上輸出主題列表，以便用戶可以直接訪問它們。

修改list.html.erb將以下內容添加到文件頂部−

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

現在嘗試使用http://localhost:3000/book/list瀏覽書籍。它將顯示所有主題與連結，以便您可以瀏覽所有與該主題相關的書籍。

List Subjects

What is Next?

希望您現在對Rails的所有操作感到滿意。

下一章將解釋如何使用布局以更好的方式放置數據。我們將向您展示如何在Rails應用程式中使用CSS。