我该如何干燥 <div> 与Rails表格？

Question

I understand that with Rails Form Helpers, I can pass in classes, placeholders, types, etc. into Rails, so instead of writing

<input id="name" name="name" type: "text" pattern="" value="Kanye West"/>
<label class="mdl-textfield__label" for="name">Enter Name</label>

I can do:

<%= f.text_field :name, class: 'mdl-textfield__input', type: 'text', pattern: '-?[0-9]*(\.[0-9]+)?', id: 'name', value: 'Kanye West' %>
<label class="mdl-textfield__label" for="name">Enter Name</label>

But it becomes pointless, because if I use a CSS framework, it ends up looking like this...

<div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet hide-dis">
  <div class="mdl-textfield advanced-input mdl-js-textfield mdl-textfield--expandable">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <%= f.text_field :name, class: 'mdl-textfield__input', type: 'text', pattern: '-?[0-9]*(\.[0-9]+)?', id: 'name', value: 'Kanye West' %>
      <label class="mdl-textfield__label" for="name">Enter Name</label>
    </div>
  </div>
</div>

You can imagine how ugly this can get when you have 10 form elements, right. I could try partializing it, but I don't know how I would pass in the f.textfield part. Please let me know how I can improve this mess and or anything else that you see that can be improved with me code :)

Answer 1

You can create your own FormBuilder and create custom controls that include the wrapper classes than you need.

For example if you want to wrap your text fields in a particular div :

class CustomFormBuilder < ActionView::Helpers::FormBuilder
  def custom_text_field(method, tag_value, options = {})
    @template.content_tag(:div,
      @template.text_field(
        @object_name, method, tag_value, objectify_options(options)
      ),
      class: 'mdl-textfield mdl-js-textfield'
    )
  end
end