Ruby on Rails 2.1 - 檢視

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

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

現在，假設您的 Web 伺服器正在執行，請在瀏覽器的位址列中提供以下輸入：

https://:3000/book/list

您收到以下錯誤訊息是因為您尚未為控制器中定義的任何檢視檔案定義任何檢視檔案。

Rails 提醒您需要為新方法建立檢視檔案。您在控制器中定義的每個方法都需要一個與方法同名的 RHTML 檔案來顯示該方法正在收集的資料。

因此，讓我們為我們在 book_controller.rb 中定義的所有方法建立檢視檔案。

為 list 方法建立檢視檔案

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

現在，要顯示實際內容，讓我們將以下程式碼放入 list.rhtml。

<% 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.rhtml 的檔案，並將其儲存到 app/views/book。將以下程式碼新增到 new.rhtml 檔案。

<h1>Add new book</h1>

<% form_tag :action => 'create'  do %>

<p><label for="book_title">Title
</label>:

<%= text_field 'book', 'title' %></p>

<p><label for="book_price">Price</label>:

<%= text_field 'book', 'price' %></p>

<p><label for="book_subject">Subject</label>:

<%= collection_select(:book,:subject_id,@subjects,:id,:name) %></p>

<p><label for="book_description">Description</label><br/>

<%= text_area 'book', 'description' %></p>

<%= submit_tag "Create" %>

<% end  %>

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

這裡的 start_form_tag() 方法使用提供給它的所有資訊將 Ruby 程式碼解釋為常規 HTML <form> 標記。例如，此標記輸出以下 HTML：

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

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

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

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

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

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

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

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

為 show 方法建立檢視檔案

此方法將顯示圖書館中任何書籍的完整詳細資訊。在 app/views/book 下建立一個 show.rhtml 檔案，並使用以下程式碼填充它：

<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.rhtml 的新檔案，並將其儲存在 app/views/book 中。使用以下程式碼填充它：

<h1>Edit Book Detail</h1>

<%= start_form_tag :action => 'update', :id => @book do %>

<p><label for="book_title">Title</label>:

   <%= text_field 'book', 'title' %></p>

<p><label for="book_price">Price</label>:

   <%= text_field 'book', 'price' %></p>

<p><label for="book_subject">Subject</label>:

   <%= collection_select(:book, :subject_id,
   @subjects, :id, :name) %></p>

<p><label for="book_description">Description</label><br/>

   <%= text_area 'book', 'description' %></p>

<%= submit_tag "Save changes" %>

<% end %>

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

此程式碼與 new 方法非常相似，只是更新操作而不是建立和定義 ID。

此時，我們需要修改 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.rhtml 並新增一個刪除連結。

轉到 <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.rhtml，並將以下程式碼新增到其中：

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

您可以透過迭代單個主題的許多書籍列表來利用關聯。

現在，修改 show.rhtml 的主題行，以便主題列表顯示連結。

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

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

修改 list.rhtml 以在檔案頂部新增以下內容：

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

列印頁面