簡體   English   中英

我該如何干燥 <div> 與Rails表格?

[英]How can I DRY this <div> with Rails Forms?

我了解使用Rails Form Helpers,可以將類,占位符,類型等傳遞到Rails中,因此無需編寫

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

但這變得毫無意義,因為如果我使用CSS框架,它最終將看起來像這樣……

<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>

您可以想象,當您有10個表單元素時,這會變得多么丑陋。 我可以嘗試partializing它,但我不知道我怎么會通過在f.textfield部分。 請讓我知道如何改善這種混亂狀況, 或者您看到的其他任何可以通過我的代碼改善的內容:)

您可以創建自己的FormBuilder並創建包含所需包裝類的自定義控件。

例如,如果您要將文本字段包裝在特定的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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM