学步园

1. 构建多模型表单

现在的博客一般都有便签功能, 方便读者通过关键字索引文章. 要实现该特性你的应用需要在一个表单中交互多个模型. 那么这时候Rails提供了另一个重要的功能: 嵌套表单

为了展示, 我们将为post的多标签提供支持. 首先, 我们需要为标签创建模型:

$ rails g model tag name:string post:references

然后:

$ rake db:migrate

接下来, 编辑post.rb建立另一半关联, 并告诉rails你需要通过posts来编辑tags:

Ruby代码

1. class Post < ActiveRecord::Base 
   
2.   validates :name,  :presence =>
   true 
3.   validates :title, :presence =>
   true, 
4.                     :length => {
   :minimum => 5 } 
5.   
6.   has_many :comments, :dependent =>
   :destroy 
7.   has_many :tags #实际上对于标签来说应该是一个多对多的关联, 为了方便教程我在这里使用一对多关系 
   
8.   
9.   accepts_nested_attributes_for :tags,
   :allow_destroy => :true, 
   
10.     :reject_if => proc { |attrs| attrs.all? { |k, v| v.blank? } } 
    
11. end 

class Post < ActiveRecord::Base
  validates :name,  :presence => true
  validates :title, :presence => true,
                    :length => { :minimum => 5 }
 
  has_many :comments, :dependent => :destroy
  has_many :tags #实际上对于标签来说应该是一个多对多的关联, 为了方便教程我在这里使用一对多关系
 
  accepts_nested_attributes_for :tags, :allow_destroy => :true,
    :reject_if => proc { |attrs| attrs.all? { |k, v| v.blank? } }
end

:allow_destroy 告诉rails在视图上显示一个移除复选框, 而 :reject_if 将会阻止任何空属性的标签的保存.

现在我们修改 views/posts/_form.erb 模板来加入tag:

Html代码

1. <% @post.tags.build %> 
   
2. <%= form_for(@post) do |post_form| %> 
   
3.   <% if @post.errors.any? %> 
   
4.     <div
   id="error_explanation"> 
   
5.       <h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved:</h2> 
   
6.  
7.       <ul> 
   
8.       <% @post.errors.full_messages.each do |msg| %> 
   
9.         <li><%= msg %></li> 
   
10.       <% end %> 
    
11.       </ul> 
    
12.     </div> 
    
13.   <% end %> 
    
14.  
15.   <div
    class="field"> 
    
16.     <%= post_form.label :name %><br
    /> 
17.     <%= post_form.text_field :name %> 
    
18.   </div> 
    
19.   <div
    class="field"> 
    
20.     <%= post_form.label :title %><br
    /> 
21.     <%= post_form.text_field :title %> 
    
22.   </div> 
    
23.   <div
    class="field"> 
    
24.     <%= post_form.label :content %><br
    /> 
25.     <%= post_form.text_area :content %> 
    
26.   </div> 
    
27.   <h2>Tags</h2> 
    
28.   <%= render :partial => "tags/form",
    :locals => {:form => post_form} %> 
    
29.   <div
    class="actions"> 
    
30.     <%= post_form.submit %> 
    
31.   </div> 
    
32. <% end %> 
    

<% @post.tags.build %>
<%= form_for(@post) do |post_form| %>
  <% if @post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
      <% @post.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= post_form.label :name %><br />
    <%= post_form.text_field :name %>
  </div>
  <div class="field">
    <%= post_form.label :title %><br />
    <%= post_form.text_field :title %>
  </div>
  <div class="field">
    <%= post_form.label :content %><br />
    <%= post_form.text_area :content %>
  </div>
  <h2>Tags</h2>
  <%= render :partial => "tags/form", :locals => {:form => post_form} %>
  <div class="actions">
    <%= post_form.submit %>
  </div>
<% end %>

现在我们把 form_for @post do |f| 改为 |psot_form| 使之更容易理解.

本示例显示了 render方法的另一个参数 :locals 它可以传递局部变量, 在这里我们希望 form 变量映射为 post_form 对象.

同时我们还在开始处初始化一个tag对象. (试试取消该行会发生什么)

现在创建文件夹 views/tags/ 然后在里面添加一个 _form.erb 局部模板:

Html代码

1. <%= form.fields_for :tags do |tag_form| %> 
   
2.   <div
   class="field"> 
   
3.     <%= tag_form.label :name, 'Tag:' %> 
   
4.     <%= tag_form.text_field :name %> 
   
5.   </div> 
   
6.   <% unless tag_form.object.nil? || tag_form.object.new_record? %> 
   
7.     <div
   class="field"> 
   
8.       <%= tag_form.label :_destroy, 'Remove:' %> 
   
9.       <%= tag_form.check_box :_destroy %> 
   
10.     </div> 
    
11.   <% end %> 
    
12. <% end %> 
    

<%= form.fields_for :tags do |tag_form| %>
  <div class="field">
    <%= tag_form.label :name, 'Tag:' %>
    <%= tag_form.text_field :name %>
  </div>
  <% unless tag_form.object.nil? || tag_form.object.new_record? %>
    <div class="field">
      <%= tag_form.label :_destroy, 'Remove:' %>
      <%= tag_form.check_box :_destroy %>
    </div>
  <% end %>
<% end %>

同样, 请留意下tags表单生成的html代码.

最后, 我们编辑show.html.erb来显示这些tags:

Html代码

1. <p
   class="notice"><%= notice %></p> 
   
2.   
3. <p> 
   
4.   <b>Name:</b> 
   
5.   <%= @post.name %> 
   
6. </p> 
   
7.   
8. <p> 
   
9.   <b>Title:</b> 
   
10.   <%= @post.title %> 
    
11. </p> 
    
12.   
13. <p> 
    
14.   <b>Content:</b> 
    
15.   <%= @post.content %> 
    
16. </p> 
    
17.   
18. <p> 
    
19.   <b>Tags:</b> 
    
20.   <%= @post.tags.map { |t| t.name }.join(", ") %> 
    
21. </p> 
    
22.   
23. <h2>Comments</h2> 
    
24. <%= render @post.comments %> 
    
25.   
26. <h2>Add a comment:</h2> 
    
27. <%= render "comments/form" %> 
    
28.   
29.   
30. <%= link_to 'Edit Post', edit_post_path(@post) %> | 
    
31. <%= link_to 'Back to Posts', posts_path %> | 
    

<p class="notice"><%= notice %></p>
 
<p>
  <b>Name:</b>
  <%= @post.name %>
</p>
 
<p>
  <b>Title:</b>
  <%= @post.title %>
</p>
 
<p>
  <b>Content:</b>
  <%= @post.content %>
</p>
 
<p>
  <b>Tags:</b>
  <%= @post.tags.map { |t| t.name }.join(", ") %>
</p>
 
<h2>Comments</h2>
<%= render @post.comments %>
 
<h2>Add a comment:</h2>
<%= render "comments/form" %>
 
 
<%= link_to 'Edit Post', edit_post_path(@post) %> |
<%= link_to 'Back to Posts', posts_path %> |

现在你可以直接在创建或编辑post页面中添加或删除tags了.

不过 @post.tags.map { |t| t.name }.join(", ") 感觉不是那么友好, 我们可以通过帮助器来改变.

2. 视图帮助器

视图帮助器位于 app/helpers, 可以提供一些可重用的视图代码片段. 在这里, 我们需要把所有tags的名称连起来并用逗号隔开, 由于它位于Posts视图, 那么我们可以在 PostsHelper 中实现:

Ruby代码

1. module PostsHelper 
2.   def join_tags(post) 
3.     post.tags.map { |t| t.name }.join(", ") 
   
4.   end 
5. end 

module PostsHelper
  def join_tags(post)
    post.tags.map { |t| t.name }.join(", ")
  end
end

然后把上面的 <%= @post.tags.map { |t| t.name }.join(", ") %> 改为:

  <%= join_tags @post %>