将 formtastic-bootstrap 样式添加到 formtastic 3

Question

我的输入如下所示：

<%= f.input :email %>

我从 formtastic(v3.1.5) 和 rails(v4.2) 得到的输出看起来像这样。

<li class="email input required stringish" id="applicant_email_input">
  <label for="applicant_email" class="label">Email<abbr title="required">*</abbr></label>
  <input maxlength="255" id="applicant_email" type="email" value="davedave@gmail.com" name="applicant[email]">
</li>

我真正想要的是让 formtastic 发出：

<div class="email input required stringish form-group" id="applicant_email_input">
  <label for="applicant_email" class=" control-label">Email<abbr title="required">*</abbr></label>
  <span class="form-wrapper">
    <input maxlength="255" id="applicant_email" type="email" value="davedave@gmail.com" name="applicant[email]" class="form-control">
  </span>
</div>

这是此应用通过 formtastic(v2.3.1) 和 formtastic-bootstrap(v3.0.0) 和 rails(v4.1) 发出的内容。

我很乐意为 formtastic-bootstrap 添加 gem 并恢复旧行为，但据我所知，formtastic-bootstrap 已经退出了formtastic 3.

现在我有一个应用程序调用了数千次 f.input，我需要处理来自 formtastic 的输出。最好的方法是什么？

Answer 1

使用 jquery 在页面重新加载时更改表单的解决方案怎么样？

var ready = function () {
    var $input = $('#applicant_email');
    var input_html = $input.html();
    $input.html('<span class="form-wrapper">' + input_html + '</span>');
}

$(document).on('turbolinks:load', ready);

你需要告诉我你想如何 select 这些字段，因为在你的例子中你没有包括完整的 html 和对真正问题的任何解释。

我也看到其他 div 有一些其他的类，可以用一些简单的方法 jquery

否则你可以编辑 gem

Answer 2

也许你可以使用 formtastic 的自定义输入？此外，这些链接可能会有所帮助：https://github.com/justinfrench/formtastic/blob/master/lib/formtastic/helpers/input_helper.rb and https://github.com/justinfrench/formtastic/issues/625。

具体来说，Justin French 建议您使用 config/initializers/formtastic_patches.rb 中的初始值设定项猴子修补您的应用程序，看起来像这样：

module Formtastic
module Inputs
module Base
module Wrapping
def input_wrapping(&block)
template.content_tag(:li,
[template.capture(&block), error_html, hint_html].join("\n").html_safe,
wrapper_html_options
)
end
end
end
end
end

然后将 :li 切换为 :div。

Answer 3

这是 formtastic 的破解版，我将其命名为 boomtastic，它将执行您想要的操作。

（这实际上包括除 form-wrapper 之外的所有您需要的内容。但是，form-wrapper 似乎只是 bootstrap-formtastic 的一个元素，而不是 [=10= 的一部分] 或标准 bootstrap。如果你真的想要 <span class="form-wrapper">，我想你可以通过编辑 boomtastic/lib/formtastic/inputs/base/wrapping.rb 添加它。）

将 formtastic-bootstrap 样式添加到 formtastic 3

add formtastic-bootstrap styles to formtastic 3

ruby-on-rails

formtastic