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>

我真正想要的是形体发射：

<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）一起发出的。

我很乐意将metatastic-bootstrap的宝石包括在内，然后回归旧的行为，但在我所知道的附近，formtastic-bootstrap在formtastic 3周围退出了。

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

Answer 1

也许您可以使用formtastic的自定义输入？此外，这些链接可能有所帮助：https://github.com/justinfrench/formtastic/blob/master/lib/formtastic/helpers/input_helper.rb和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 2

以下是formtastic的黑客版本，我将其命名为boomtastic，它可以执行您想要的操作。

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

Answer 3

使用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);

您需要告诉我您要如何选择这些字段，因为在您的示例中，您没有包含完整的HTML以及对实际问题的任何解释。

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

来完成

否则你可以编辑那个宝石

为formtastic添加formtastic-bootstrap样式3

3 个答案: