Rails 4表单构建器,全面支持Twitter Bootstrap 3

Question

是否有任何Rails 4兼容的表单构建器gem可以为Twitter Bootstrap 3.0.0表单提供全面的支持？

这是我认为"全面"支持的基准:

• 支持所有3种布局(基本,水平,内联)
• 支持基本输入类型(输入,文本区域,选择等)
• 支持堆叠和内联复选框/单选按钮
• 支持所有输入状态(焦点,禁用,验证)
• 支持帮助文本/错误消息
• 支持input-append/prepend(现在在TWBS3中称为输入组).
• 支持处理Rails的特定表单'元素',例如date_select(内联选择框)

有关TWBS3表单的详细信息,请参阅TWBS3 文档和WIP github问题.

我已经看过simple_form和twitter_bootstrap_form_for,虽然两者都取得了进展,但目前似乎都没有提供足够的解决方案.

简单的形式

看起来有一个基本布局的解决方案,但是由于TWBS3需要额外的网格标记,我目前无法看到水平形式.

https://github.com/plataformatec/simple_form/pull/864 https://github.com/plataformatec/simple_form/issues/857

Twitter引导表单

这个拉取请求看起来很有希望,但我可以看到标记和正在使用的类中存在一些不准确之处.

https://github.com/stouset/twitter_bootstrap_form_for/pull/84

Answer 1

根据我自己使用Bootstrap和simple_form/form_builder方法的经验,simple_form不值得麻烦.有太多的东西,简单的形式没有布局和控制的答案,一些关键的黑点是包装标签上的类,选择具有html属性,或做一些简单的事情,如模仿切换/单选按钮的引导按钮组.simple_form中的i18n支持也是一个挑战,需要大量重复.

还要考虑服务器端呈现是否是现代应用程序的正确方法.我正在从传统的rails /服务器端呈现过渡到SPA(单页应用程序)模型.要做到这一点,我使用backbone.js和marionette与生态模板和coffeescript.

在架构上,simple_form/rails表单构建器方法似乎有点缺陷,并且在其中有很多复杂的代码用于构建html字符串片段.

好吧,我说这是视图模板的用途!

在一天结束时,视图由许多不同的子视图模板(例如局部视图)组成,我认为它应该直接用于控制/现场组件.相比之下,构建器方法总是被忽略,缺乏对不同jquery组件的支持,并且不够灵活,无法跟上步伐.

我建议使用参数化视图模板/局部文件,在您的应用程序中为每种类型的控件/组件或视图构造编写所需的标记,并简单地组合它们以获得所需的布局.如果您正在执行此服务器端,则可以使用一些帮助程序包装所有呈现部分调用以获得语法上的甜蜜.如果您在客户端使用说eco模板,请检查主页面,您将看到在那里定义和调用表单构建模板的示例.

不要将自己锁定在表单构建器的功能中,使用boostrap文档示例作为模板的起点,然后简单地调用它们!

Answer 2

你有没有检查过https://github.com/potenza/bootstrap_form？我们刚刚添加了对Bootstrap 3的支持,它非常​​轻巧.

我们几乎支持您的所有要求,但我们仍在为日期和时间选择一个好的解决方案,因为它们默认情况下是当前堆叠的.

这是erb中的示例表单:

<%= bootstrap_form_for(@user) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me %>
  <%= f.submit "Log In" %>
<% end %>

并输出:

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
  <div class="form-group">
    <label for="user_email">Email</label>
    <input class="form-control" id="user_email" name="user[email]" type="email">
  </div>
  <div class="form-group">
    <label for="user_password">Password</label>
    <input class="form-control" id="user_password" name="user[password]" type="password">
  </div>
  <div class="checkbox">
    <label for="user_remember_me">
      <input name="user[remember_me]" type="hidden" value="0">
      <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me
    </label>
  </div>
  <input class="btn btn-default" name="commit" type="submit" value="Log In">
</form>

Answer 3

最近尝试过这个，有一些技巧可以让 simple_form 工作，我想说它还没有准备好迎接黄金时段。几周后再次检查简单表单，同时您可以手动构建标记或使用 simple_form 处理笨拙的表单，直到它更新为止。

您可以在这里监控其进度：https ://github.com/rafaelfranca/simple_form-b​​ootstrap/pull/28