Question

这是一个简单的问题，我有点惭愧地问，但是我一直在撞墙并在导轨3文档中导航而没有任何成功：/

所以，事情就是这样：

当我使用fields_for帮助程序时，它会将生成的字段包装在<div class="fields"> ... </div>标记中。

所以，我的代码是

<ul class="block-grid two-up">
  <%= f.fields_for :images do |image_builder| %>
    <%= render "images/form", :f => image_builder %>
  <% end %>
</ul>

，生成的html为：

<ul class="block-grid two-up">
  <div class="fields">
    <div>
      <label for="company_images_attributes_0_image"> Image</label>
      <input id="company_images_attributes_0_image" 
             name="company[images_attributes][0][image]" type="file">
    </div>
  </div>
  <div class="fields">
    <div>
      <label for="company_images_attributes_1_image"> Image</label>
      <input id="company_images_attributes_1_image" 
             name="company[images_attributes][1][image]" type="file">
    </div>
  </div>
</ul>

我想要做的是将<div class="fields">包装标记更改为<li>。

文档说您可以将选项传递给fields_for，但是不清楚您可以传递哪些选项，也许您可以更改此包装标记？

当表单中存在错误时，可能会覆盖一个函数，如ActionView::Base.field_error_proc。

快速编辑：我忘了提到我正在使用simple_form来生成此表单。我尝试在simple_form.rb配置文件中查找自定义方法，但我没有看到任何方法。

解决方案 在进一步调查之后，结果表明表单也使用nested_form gem来生成表单（不仅是simple_form）。这个生成器导致fields_for被包装在div标签中。谢谢大家的建议！

Answer 1

以下禁用包装器：

f.fields_for :images, wrapper:false do |image_builder|

然后您可以在构建器块中添加自己的包装器。

Answer 2

一个便宜的解决方案就是将<li>标记添加到表单中，如：

<%= f.fields_for :images do |image_builder| %>
 <li><%= render "images/form", :f => image_builder %></li>
<% end %>

我不确定你是否可以通过将一些参数传递给field_for来完全消除div标签。但我认为您可以通过传递html块来更改div类或id的名称，就像在form_for中一样：

<%= form_for @image, :as => :post, :url => post_image_path, 
   :html => { :class => "new_image", :id => "new_image" } do |f| %>

Answer 3

你说你使用的是simple_form，那么你应该说<%= f.simple_fields_for..。您是否尝试过使用wrapper_html选项：

<%= f.input :name, :label_html => { :class => 'upcase strong' },
  :input_html => { :class => 'medium' }, :wrapper_html => { :class => 'grid_6 alpha' } %>

编辑1： 来自SimpleForm文档：

<强>包装

SimpleForm允许您添加包含标签，错误，提示和输入的包装器。第一步是配置包装器标签：

SimpleForm.wrapper_tag = :p

现在，您不再需要包装f.input调用了：

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>

编辑2：

还有这个配置选项，你可以用它来说明与包装元素一起使用的css类：

<强>配置/初始化/ simple_form.rb

# CSS class to add to all wrapper tags.
config.wrapper_class = :input

如何更改fields_for生成的html标记和类？

3 个答案: