Ruby on Rails 2.1 - 视图

Rails View是一个ERb程序,它通过可相互访问的变量与控制器共享数据.

如果你查看库应用程序的app/views目录,你会看到一个子目录对于我们创建的每个控制器:book.当使用生成脚本创建同名控制器时,每个子目录都是自动创建的.

现在,假设您的Web服务器已启动并运行,请在浏览器的地址中提供以下输入box :

 
 http://localhost:3000/book/list

您收到以下错误消息,因为您尚未为控制器中定义的任何方法定义任何视图文件.

Missing Template

Rails让您知道需要为新方法创建视图文件.您在控制器中定义的每个方法都需要具有与方法同名的相应RHTML文件,以显示该方法正在收集的数据.

因此,让我们创建视图文件对于我们在book_controller.rb中定义的所有方法.

为列表创建视图文件方法

使用您最喜欢的方法创建一个名为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方法的控制器中创建的.

<%=%>之间的代码. tags是一个 link_to 方法调用. link_to的第一个参数是要在< a>之间显示的文本.标签.第二个参数是单击链接时调用的操作.在这种情况下,它是show方法.最后一个参数是通过params对象传递的书的id

现在,尝试刷新浏览器,你应该得到以下屏幕,因为我们的书中没有任何书库.

No Book Message

为新方法创建视图文件

直到现在,我们的库中没有任何书籍.我们必须在系统中创建一些书籍.因此,让我们设计一个对应于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方法创建一个从数组构建的HTML选择菜单,例如@books一个.有五个参数,分别如下:

  • :book : 你正在操纵的对象.在这种情况下,它是一个书籍对象.

  • :subject_id : 保存图书时填充的字段.

  • @books : 您正在使用的数组.

  • :id : 存储在数据库中的值.就HTML而言,这是<选项> tag的值参数.

  • :name : 用户在下拉菜单中看到的输出.这是< option>之间的值.标签.

接下来使用的是 submit_tag ,它输出< input>提交表单的按钮.最后,还有 end_form_tag 方法,只需转换为</form>.

转到浏览器并访问http://localhost:3000/book/新.这将为您提供以下屏幕.

New Book

在此表单中输入一些数据,然后单击"创建"按钮.这将导致调用 create 方法,该方法不需要任何视图,因为此方法使用 list new 方法来查看结果.当您单击创建按钮时,数据应该成功提交并将您重定向到列表页面,在该页面中您现在有一个项目列出如下 :

Create Book

如果单击该链接,您应该会看到另一个错误"模板缺失"因为您还没有为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变量提取主题的名称值.如果您点击任何列出的记录,它将显示以下屏幕.

Show Book

创建用于编辑的视图文件方法

创建一个名为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>

现在,尝试使用http://localhost:3000/book/list浏览书籍.它会为您提供所有书籍的列表以及编辑选项.单击"编辑"选项后,您将看到下一个屏幕,如下所示;

编辑书

现在,您编辑此信息,然后单击保存更改按钮.它将导致调用控制器文件中的 update 方法,它将更新所有已更改的属性.请注意,更新方法不需要任何视图文件,因为它使用 show 编辑方法来显示其结果.

为删除方法创建视图文件

使用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确认框,询问您是否确实要执行此操作.如果用户单击"确定",则操作继续,并删除该项目.

现在,尝试使用http://localhost:3000/book/list浏览书籍.它将为您提供所有书籍的列表以及编辑删除选项,如下所示 :

删除书籍

现在,使用删除选项,您可以删除任何列出的记录.

为show_subjects方法创建视图文件

在app/views/中创建一个新文件show_subjects.rhtml book目录并将以下代码添加到 :

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

现在,尝试使用http://localhost:3000/book/list浏览书籍.它将显示所有带有链接的主题,以便您可以浏览与该主题相关的所有书籍.

List Subjects

下一步是什么?

我们希望您现在对所有Rails操作感到满意.

下一章将介绍如何使用布局更好地处理数据.我们还将向您展示如何在Rails应用程序中使用CSS.