Как изменить HTML-тег и класс, сгенерированный fields_for? - PullRequest
Новая
       48

Как изменить HTML-тег и класс, сгенерированный fields_for?

10 голосов
/ 20 января 2012

Это простой вопрос, который мне стыдно задавать, но я бился головой о стену и безуспешно перемещался по документации рельсов 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 для генерации формы (не только simple_form). Этот генератор вызывал включение fields_for в тег div. Спасибо всем за их предложения!

Ответы [ 3 ]

11 голосов
/ 25 сентября 2014

Следующее отключает оболочку: 

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

, затем вы можете добавить свою собственную оболочку в блоке компоновщика.

2 голосов
/ 20 января 2012

Дешевым решением было бы просто добавить тег <li> в форму, например: 

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

Я не уверен, что вы можете полностью исключить тег div, передав несколько параметров в field_for. Но я думаю, что вы можете изменить имя класса div или id, передав блок html, как в form_for: 

<%= form_for @image, :as => :post, :url => post_image_path, 
   :html => { :class => "new_image", :id => "new_image" } do |f| %>
0 голосов
/ 20 января 2012

Вы сказали, что используете 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
...