在常见的 Rails 表单场景中,我们时常需要用到 select
下拉选择框,然而这部分我发现一直都挺麻烦的,而且不规范,没一个统一方案。
<%= form_with(model: post, local: true) do |form| %>
<div class="field">
<%= form.label :title %>
<%= form.text_field :title %>
</div>
<div class="field">
<%= form.label :category_id %>
<%= form.select :category_id, Category.where("parent_id is null and depth = 0").order("name asc").all.map { |category| [category.name, category.id] } %>
</div>
<div class="actions">
<%= form.submit %>
</div>
<% end %>
于是在很多的 Rails 项目里面常常会看到这样一行代码:
<%= form.select :category_id, Category.where("parent_id is null and depth = 0").order("name asc").all.map { |category| [category.name, category.id] } %>
为了解决这个繁琐的问题,我实现一个 form-select
class Category
form_select :name, scope: -> { where("parent_id is null and depth = 0").order("name asc") }
form_select :reverse_name, field: [:name, :id], scope: -> { order("name desc") }
end
class User
form_select :login, field: [:login, :to_param], scope: -> { order("id desc") }
form_select :email
form_select :email_value, field: :email
form_select :city, field: :city, scope: -> { where("city is not null").select(:city).distinct }
def to_param
login.downcase
end
end
class Post
form_select :author, field: [:author], scope: -> { where("author is not null").select(:author).distinct }
end
通过在 Model 中使用 form_select
来定义下拉选项的别名函数,我们就可以得到这样的结果:
irb> Category.name_options
=> [["Android", 3], ["iOS", 2], ["News", 1]]
irb> Category.reverse_name_options
=> [["News", 1], ["iOS", 2], ["Android", 3]]
irb> User.login_options
=> [["Foo", "foo"], ["Mike", "mike"], ["Jason", "jason"]]
irb> User.email_options
=> [["[email protected]", 10], ["[email protected]", 11], ["[email protected]", 12]]
irb> User.email_value_options
=> [["[email protected]", "[email protected]"], ["[email protected]", "[email protected]"], ["[email protected]", "[email protected]"]]
irb> User.city_options
=> [["NewYork", "NewYork"], ["San Francisco", "San Francisco"], ["Chicago", "Chicago"]]
irb> Post.author_options
=> [["Jason", "Jason"], ["Mike", "Mike"], ["Foor", "Foo"]]
于是在 View 里面就可以直接使用了:
<div class="field">
<%= form.label :category_id %>
<%= form.select :category_id, Category.name_options %>
</div>
<div class="field">
<%= form.label :user_id %>
<%= form.select :user_id, User.email_options %>
</div>
<div class="field">
<%= form.label :city %>
<%= form.select :city, User.city_options %>
</div>
这样做带来的好处: