Oh!Coder

Coding Life

SimpleForm Gem 简介

| Comments

继上个星期了解Cocoon之后,工作中也需要多了解一些View层的姿势,这次选定了SimpleForm作为学习的Gem。

其实,除了工作层面以外,在Cocoon的源码文档介绍中,也提到了SimpleForm,当然还有另外一个View层的辅助Gem,叫Formtastic。这次先对SimpleForm作一个简单的了解。

功能简介

SimpleForm的功能其实就是为了简化View页面的编写,主要是以创建表单为主,以此重新定义的一种DSL。在原文档的简要介绍中,作者提到SimpleForm的大部分DSL继承自Formtastic,所以给我初步的印象,SimpleForm是对Formtastic的进一步简化。

基本使用

在原文档中,给出了一些创建表单时,进行自定义的例子。其中对于表单填写的错误信息,默认不需要你去写额外的代码,SimpleForm会自动为你生成。下面是最简单的一个示例:

1
2
3
4
5
<%= simple_form_for @user do |f| %>
    <%= f.input :username %>
    <%= f.input :password %>
    <%= f.button :submit %>
<% end %>

除了提供最基本的辅助方法以外,还可以对表单进行自定义。其中包括对不同属性字段进行自定义修改等。
举一个简单的示例:

1
2
3
4
5
6
7
<%= simple_form_for @user do |f| %>
    <%= f.input :username, label: 'Your username please' %>
    <%= f.input :password, hint: 'No special characters.' %>
    <%= f.input :email, placeholder: '[email protected]' %>
    <%= f.input :remember_me, inline_label: 'Yes, remember me' %>
    <%= f.button :submit %>
<% end %>

如上例所示,可以对一些html的属性字段进行自定义,类似更多的详细功能可以参照原文档

  • 剔除div标签

默认情况下,SimpleForm在所生成的原生HTML标签中会带有div标签,SimpleForm提供了辅助方法避免生成div标签。最简单的方法是直接使用f.input_field

举例说明:

1
2
3
4
simple_form_for @user do |f|
    f.input_field :name
    f.input_field :remember_me, as: :boolean
end

对应生成的HTML代码如下:

1
2
3
4
5
6
7
8
<form>
    ...
    <input class="string required" id="user_name" maxlength="255" name="user[name]" size="255" type="text">
    <input name="user[remember_me]" type="hidden" value="0">
    <label class="checkbox">
        <input class="boolean optional" id="user_published" name="user[remember_me]" type="checkbox" value="1">
    </label>
</form>

更多详情可以参见原文档

  • Collection

如果想添加选择器控件,可以覆盖:collection实现:

1
2
3
4
5
<%= simple_form_for @user do |f| %>
    <%= f.input :user %>
    <%= f.input :age, collection: 18..60 %>
    <%= f.button :submit %>
<% end %>

更多详情可以参见原文档

  • 表关联

SimpleForm对于有关联关系的表单提供了对应的辅助方法。还是用举例来说明:

下面是model层的表关系:

1
2
3
4
5
6
7
8
9
10
11
12
class User < ActiveRecord::Base
    belongs_to :company
    has_and_belongs_to_many :roles
end

class Company < ActiveRecord::Base
    has_many :users
end

class Role < AcitveRecord::Base
    has_and_belongs_to_many :users
end

对应View层的表单可以实现如下:

1
2
3
4
5
6
<%= simple_form_for @user do |f| %>
    <%= f.input :name %>
    <%= f.association :company %>
    <%= f.association :roles %>
    <%= f.button :submit %>
<% end %>

如果想修改对应嵌套的HTML标签类型,可以修改如下:

1
2
f.association :company, as: :radio_buttons
f.association :roles,   as: :check_boxes

更多详情可以参见原文档

除了上面提到的主要功能外,SimpleForm还提供了一些其他辅助方法。例如对Radio Button和Check Box的自定义等。这方面的更多详情可以参见原文档.

上面列举的是一些主要的功能,除此之外,还有一些比较细节的小技巧,更多可以参见原文档

Comments