Ruby on Rails - 檢視

Rails 檢視是一個 ERb 程式，它透過互相訪問的變數與控制器共享資料。

如果您檢視 library 應用程式的 app/views 目錄，您會看到為我們建立的每個控制器都有一個子目錄：book。每次使用 generate 指令碼建立同名控制器時，都會自動建立這些子目錄。

Rails 會讓您知道您需要為每個新方法建立檢視檔案。您在控制器中定義的每個方法都需要有一個與方法同名的相應 **erb** 檔案，以顯示該方法正在收集的資料。

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

為 list 方法建立檢視檔案

使用您喜歡的文字編輯器建立一個名為 **list.html.erb** 的檔案，並將其儲存到 app/views/book。建立並儲存檔案後，重新整理您的網頁瀏覽器。您應該看到一個空白頁面；如果看不到，請檢查檔案的拼寫，確保它與控制器的名稱完全相同。

現在，顯示實際內容。讓我們將以下程式碼放入 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 陣列中是否包含任何物件。如果陣列為空，**.blank?** 方法返回 true，如果陣列包含任何物件，則返回 false。此 @books 物件是在控制器中 list 方法內建立的。

<%= %> 標記之間的程式碼是 **link_to** 方法呼叫。link_to 的第一個引數是 <a> 標記之間要顯示的文字。第二個引數是單擊連結時呼叫的操作。在本例中，它是 show 方法。最後一個引數是透過 params 物件傳遞的圖書 ID。

現在，嘗試重新整理瀏覽器，您應該會看到以下螢幕，因為我們的圖書館中沒有任何圖書。

為 new 方法建立檢視檔案

到目前為止，我們的圖書館中沒有任何圖書。我們必須在系統中建立一些圖書。因此，讓我們設計一個與 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">

下一個方法是 **text_field**，它輸出一個 <input> 文字欄位。text_field 的引數是物件和欄位名稱。在本例中，物件是 *book*，名稱是 *title*。

Rails 方法 **collection_select** 建立一個從陣列（例如 @books 陣列）構建的 HTML 選擇選單。共有五個引數，如下所示：

**：book** - 您正在操作的物件。在本例中，它是一個 book 物件。
**：subject_id** - 儲存圖書時填充的欄位。
**@books** - 您正在使用的陣列。
**：id** - 儲存在資料庫中的值。就 HTML 而言，這是 <option> 標記的 value 引數。
**：name** - 使用者在下拉選單中看到的輸出。這是 <option> 標記之間的值。

接下來使用的是 **submit_tag**，它輸出一個提交表單的 <input> 按鈕。最後，有一個 **end** 方法，它簡單地轉換為 </form>。

轉到您的瀏覽器並訪問 **https://:3000/book/new。** 這將為您提供以下螢幕。

在此表單中輸入一些資料，然後單擊“建立”按鈕。我在欄位中添加了以下詳細資訊：

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

單擊“建立”按鈕時，它將呼叫 **create** 方法，該方法不需要任何檢視，因為此方法使用 **list** 或 **new** 方法來檢視結果。因此，當您單擊“建立”按鈕時，資料應成功提交併重定向到列表頁面，其中您現在列出了單個專案，如下所示：

如果您單擊連結，您應該會看到另一個“模板丟失”錯誤，因為您尚未為 show 方法建立模板檔案。

為 show 方法建立檢視檔案

此方法將顯示圖書館中任何圖書的完整詳細資訊。在 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**。在本例中，您可以使用 **belongs_to** 關聯透過 @book 變數提取主題的名稱值。如果單擊任何列出的記錄，它將顯示以下螢幕。

為 edit 方法建立檢視檔案

建立一個名為 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_for 標記。

此時，我們需要修改 **list 方法** 的檢視檔案。轉到 <li></li> 元素並將其修改為如下所示：

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

現在，嘗試使用 **https://:3000/book/list** 瀏覽圖書。它將為您提供所有圖書的列表以及 **編輯** 選項。當您單擊“編輯”選項時，您將看到下一個螢幕，如下所示：

現在，編輯此資訊，然後單擊“儲存更改”按鈕。這將導致呼叫控制器檔案中可用的 **update** 方法，並且它將更新所有更改的屬性。請注意，**update** 方法不需要任何檢視檔案，因為它使用 **show** 或 **edit** 方法來顯示其結果。

為 delete 方法建立檢視檔案

使用 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 確認框，詢問您是否真的要執行此操作。如果使用者單擊“確定”，則操作將繼續進行，並且專案將被刪除。

現在，嘗試使用 **https://:3000/book/list** 瀏覽圖書。它將為您提供所有圖書的列表以及 **編輯** 和 **刪除** 選項，如下所示：

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

為 show_subjects 方法建立檢視檔案

在 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 的“主題：”行，以便主題列表顯示一個連結。

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

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

接下來是什麼？

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

下一章將解釋如何使用 **佈局** 以更好的方式顯示您的資料。我們將向您展示如何在 Rails 應用程式中使用 CSS。

列印頁面