`
doabit
  • 浏览: 52810 次
  • 性别: Icon_minigender_1
  • 来自: 江苏
社区版块
存档分类
最新评论

Formbuilder simple_form使用

阅读更多
Rails中表单用的比较多,其中formtastic是一个比较简单的构建表单的gem.我个人用了一阵子,不太喜欢它生成的标签,后来发现了Simple_form,相比formtastic,可以更好自定义标签,有更大的灵活性。
关于 formtastic ,railscasts上有相关教程,可参考railscasts
1.安装gem
sudo gem install simple_form


2.修改Gemfile:
 gem "simple_form"


3.运行generator,会生成所需文件
rails generate simple_form:install

#生成文件 
 create  config/initializers/simple_form.rb
  create  config/locales/simple_form.en.yml
  create  lib/templates/erb/scaffold/_form.html.erb


4.使用,以User model为例
 
  <%= simple_form_for @user do |f| %>
    <%= f.input :username %>
    <%= f.input :password%>
    <%= f.input :email%>
    <%= f.input :profile,:as=>:text%> #as使用
    <%= f.input :age, :collection => 18..60 , :prompt => "Select your age"%> #collection使用
    <%= f.simple_fields_for :adress do |adress_form| %>  #simple_fields_for使用
        <%= adress_form.input :name %>
    <% end %>
    <%= f.button :submit %>
  <% end %>
  

  如果 不想生成 label,可以使其设置为false
 
    <%= f.input :username,:label=>false %>
 

  同样,如果想使required为false,
   <%= f.input :username, :required => false %>


5.关于as
  在activerecord下,会自动对应相关映射,例如:string生成单行文本,text生成多行文本,不过如果使用mongodb,我使用的是mongoid,没有text
类型,全是string,所以要自己手动as,例如
 
<%= f.input :profile,:as=>:text%>


6. Associations 使用
  
class User < ActiveRecord::Base
    belongs_to :company
    has_and_belongs_to_many :roles
  end

  class Company < ActiveRecord::Base
    has_many :users
  end

  class Role < ActiveRecord::Base
    has_and_belongs_to_many :users
  end
  

  表单中我们可以使用
  
 <%= simple_form_for @user do |f| %>
    <%= f.input :name %>
    <%= f.association :company %>
    <%= f.association :roles %>
    <%= f.button :submit %>
  <% end %>


7.配置 config/initializers/simple_form.rb
   Wrapper,如果想修改生成的标签为P(默认为div),只要修改
  
SimpleForm.wrapper_tag = :p

 
   默认情况下
 
config.components = [ :label_input, :hint,:error]

  如果不想使用error,只要去掉 即可
  
config.components = [ :label_input, :hint]

   更多配置可自行参考文件

8.国际化,只要修改对应本地化文件即可,
  zh:
    simple_form:
      labels:
        user:
          username: '用户名'
          password: '密码'
      hints:
        user:
          username: '登录用户名.'
          password: '输入正确的字符.'
      placeholders:
        user:
          username: '你的用户名'
          password: '****'

9. 和formtastic的比较
    我个人比较喜欢 simple_form,生成的代码简洁些,更加灵活,可自定义性强。

10.textmate支持
    formtastic:formtastic_tmbundle
    simple_form:simple_form_tmbundle


-------
继续打标记:
转载注明:javaeye--doabit..
----------------------------
1
0
分享到:
评论
3 楼 doabit 2010-10-10  
cncolder 写道
你用Mongoid, f.association :roles 这里能用吗?

http://github.com/doabit/simple_form 不知道你可以用不。我现在这里没问题了
2 楼 doabit 2010-10-10  
cncolder 写道
你用Mongoid, f.association :roles 这里能用吗?

你好,我用的最新的simple_form1.2.2也有问题,我fork了一份。。现在我这可以正常使用了,不知道你的报的什么错
1 楼 cncolder 2010-10-09  
你用Mongoid, f.association :roles 这里能用吗?

相关推荐

    simple_form:简化Rails的表单! 它与简单的DSL绑定,对标记无意见

    Simple Form的基本目标是不触及定义布局的方式,而是让您为眼睛找到更好的设计。 大多数DSL都是从Formtastic继承的,我们对此表示感谢,并应使您感到宾至如归。 信息:本自述文件指的是简单表格5.0。 对于较早的...

    怎样使用C++ Builder 6 制作邮件特快专递程序.rar_builder_发邮件

    本教程将探讨如何使用C++ Builder 6来制作一个邮件特快专递程序,这涉及到网络编程和SMTP(Simple Mail Transfer Protocol)协议的应用。 首先,我们需要理解SMTP协议的基本原理。SMTP是互联网标准,用于发送电子...

    WordPress.Form.Builder.Survey.Quiz.FSQM.Pro.v3.0.2

    《WordPress Form Builder Survey Quiz FSQM Pro v3.0.2:构建高效互动的网站表单》 WordPress Form Builder Survey Quiz FSQM Pro v3.0.2 是一款专为WordPress平台设计的强大工具,它允许用户无需编程知识即可创建...

    使用jQuery的动态嵌套表单变得容易; 适用于formtastic,simple_form或默认表单-Ruby开发

    Cocoon与表单生成器无关,因此可与标准Rails,Formtastic或SimpleForm一起使用。 它与导轨3、4和5兼容。该项目与Apache Cocoon不相关。 先决条件此gem取决于jQuery,因此在您已经在使用jQuery的Rails项目中,它最...

    simple-jquery-form-builder:一个简单的,以jQuery为重点的表单生成器插件,易于修改,因此适合您项目的特定需求

    简单的jQuery Form Builder 一个简单的,以jQuery为重点的表单生成器插件,易于修改,因此适合您项目的特定需求。 在PHP中使用将表单保存到数据库或从数据库加载表单的示例,但是不需要PHP。 详细信息: : 演示: ...

    Simple-Form-Builder:简单的表单生成器

    开始。 简单的表单生成器。 要添加新的用户信息块,请单击“添加新信息块”:\n - 块位置的行号 - 块的标签 要为任何块添加新属性,请单击“添加新属性”:- 键入块名称,位置属性 - 属性名称(或标签) - 属性类型...

    simple-form-builder:简单表单生成器(仅前端)

    "simple-form-builder"是一个专为快速创建定制化表单而设计的前端工具,它允许开发者通过简洁的界面构建动态和灵活的表单,无需复杂的后端支持。这个项目基于轻量级的JavaScript框架——Svelte,它以其高性能和简洁...

    form-builder:表格生成器

    Goutam singh的Form Builder 用Javascript编写的Simple Form Builder支持Dualway绑定和Json Export 利用车把,Way.js和JQuery 支持自定义工具

    windowbuilder pro 4

    WindowBuilder is a powerful and easy to use bi-directional Java GUI designer that makes it very easy to create Java GUI applications without spending a lot of time writing code to display simple forms...

    windowbuilder pro 2

    WindowBuilder is a powerful and easy to use bi-directional Java GUI designer that makes it very easy to create Java GUI applications without spending a lot of time writing code to display simple forms...

    SignUp_Reserve

    Rails 设计 架构: : 首选项: 吉特:真的 应用程序4:导轨设计 认证:设计 授权:假 Better_errors: 真 部署:无 local_env_file: 假 ...quiet_assets:真实 ...form_builder: simple_form rvmrc:真的 执照 在路上

    freeform:将表单与域模型脱钩!

    FreeForm与大多数表单gem兼容,包括simpleform和formbuilder FreeForm不能与Ryan Bate的nested_form gem一起使用,但提供其自身相同的行为请使用/迁移到该gem的2.x版本。 将不再支持1.x版,而2.x版则提供了更好的...

    windowbuilder pro 3

    WindowBuilder is a powerful and easy to use bi-directional Java GUI designer that makes it very easy to create Java GUI applications without spending a lot of time writing code to display simple forms...

    windowbuilder pro 1

    WindowBuilder is a powerful and easy to use bi-directional Java GUI designer that makes it very easy to create Java GUI applications without spending a lot of time writing code to display simple forms...

    meteor-autoform-builder:一个小实验,展示了如何使用流星和自动表单创建表单生成器

    在`/client`目录下创建`components`文件夹,然后创建`FormBuilder.js`文件,实现表单生成器的界面和逻辑。你可以使用Blaze或React等 Meteor 支持的模板引擎来编写视图。 4. 配置路由 在`/imports/router.js`中设置...

    A simple php CMS:PHP的CMS-开源

    压缩包中的文件名为 "pfbc2.2-php5.3",这可能是一个特定版本的PHP表单构建类库(PFBC,PHP Form Builder Class)的文件,适用于PHP 5.3版本。PFBC是一个用于创建动态Web表单的工具,可以帮助开发者快速构建用户输入...

    BCB调用WebServers接口

    本文将详细介绍如何在BCB(Borland C++ Builder)环境中使用WSDL Importer调用WebServers接口,以腾讯QQ在线状态查询为例。 首先,我们需要打开BCB编译器并新建一个项目。在“File”菜单中选择“New”,然后在...

    UG6.0快捷键大全

    LABEL &X-Form... MESSAGE Edits poles and points of splines and surfaces. SYNONYMS pole editing, control point editing, surface editing, b-surface editing, spline editing, curve editing, shape ...

    JQuerry 插件介绍

    - Simple jQuery form validation:轻量级的表单验证插件。 - jQuery XAV - form validations:提供各种验证规则。 - Masked Input:允许用户按照预设格式输入数据。 - TypeWatch Plugin:监测输入字段的实时...

    jQuery插件教程(搜罗了全部插件).docx

    - Simple jQuery form validation:轻量级验证插件,易于集成。 - jQuery XAV - form validations:提供丰富的验证规则和错误提示。 - Masked Input:格式化输入字段,如电话号码、信用卡号等。 - TypeWatch ...

Global site tag (gtag.js) - Google Analytics