Clever Geek Handbook

強制された場所での簡単なレイアウト：ヘルパー、デコレーター、フォーム要素

ビューでは、ロジックを使用することはお勧めできず、通常はデータを操作することはお勧めできないことを多くの人がすでに知っています。 これを行うために、このようなコードはデコレータ 、 カスタムフォーム要素 、 コンポーネント、そして最後にヘルパーに配置されます。



実際、このアプローチでは、ビューファイルの見栄えが良くなります。 しかし、カスタムフォーム要素とヘルパーは、単に耐えられません。



しかし、それらをよりクリーンで簡単にするシンプルでエレガントな方法があります...







たとえば、 PriceRangeInput



フォームのカスタム要素をPriceRangeInput



します。 



 class PriceRangeInput < SimpleForm::Inputs::Base def input output = template.content_tag(:div, class: 'j-price-slider') do div = '' div << template.content_tag(:div, class: 'row') do row = "" row << template.content_tag(:span, class: 'span3') do @builder.input(:min_total_price, label: false, input_html: { class: 'input-small j-min-total-price'}) end row << template.content_tag(:span, class: 'span3') do @builder.input(:max_total_price, label: false, input_html: { class: 'input-small j-max-total-price'}) end row.html_safe end div << template.content_tag(:div, class: 'row') do template.content_tag(:span, class: 'span6') do template.content_tag(:div, class: 'j-slider', :data => :slider_data) do end end end div.html_safe end output.html_safe end end


この要素は、フォームから簡単に呼び出すことができます。 



 = simple_form_for current_search_form, :url => :search, :method => "get" do |f| = f.input :price_range, :label => false, :as => :price_range


しかし、フォーム自体を単純化したため、カスタム要素は理解しにくくなりました。 その構造は混乱しやすいです。



抜け道がある



解決策は、 Arbre-Rubyオブジェクト指向HTMLビューを使用することです。



これにより、コードでレイアウトを簡単に使用でき、再利用可能なコンポーネントを作成できます。 Arbreはacive_adminプロジェクトで生まれ、実際にその基盤となっています。



要点をつかむ



フォーム要素の基本クラスにアシスタントを追加することから始めましょう。 これは、適切なモンキーパッチのまれな例の1つです。 



 class SimpleForm::Inputs::Base private def arbre assigns={}, &block Arbre::Context.new assigns.reverse_merge(:builder=>@builder), template, &block end end


これで、フォーム要素をリファクタリングできます。 



  def input arbre slider_data: slider_data do div class: 'j-price-slider' do div class: 'row' do span class: 'span3' do builder.input :min_total_price, label: false, input_html: { class: 'input-small j-min-total-price'} end span class: 'span3' do builder.input :max_total_price, label: false, input_html: { class: 'input-small j-max-total-price'} end end div class: 'row' do span class: 'span6' do div class: 'j-slider', data: slider_data end end end end end


不要なものをすべて削除し、本当に必要なものだけを残しました。 コードはより見やすく、より明確に見えます。



Arbreの利点



そして簡単な要約を要約します。



1.使用する
アルブレ
生成されたタグを保存するためのバッファを取り除くことができます： 



 #  buffer = '' buffer << template.content_tag(:div, class: 'row') do ... buffer << template.content_tag(:div, class: 'row') do buffer.html_safe #  div class: 'row' do ... div class: 'row' do ...


2.コードで迷惑なcontent_tag



を使用する必要がなくなり、必要なタグを直接示すことができます。 



 #  template.content_tag(:div, class: 'row') #  div class: 'row'


3.そして、最も興味深いのはコンポーネントです。



独自のコンポーネント



もう1つの驚くべき事実は、 Arbre



を使用すると、独自の要素を簡単に追加し、任意のコンテキストで使用できることです。 



 class Row < Arbre::Component builder_method :row def build(title, attributes = {}) super(attributes.merge class: 'row') end end




発表後すぐに、コンポーネントはarbreコンテキストのどこでも使用できる状態になります。 代わりに： 



 template.content_tag(:div, class: 'row') do ...


書ける 



 row do ...


出力でコードを取得します： 



  <div class="row"> ...


一般に、arbreは避けられないものにするのに役立ちます-コード内のレイアウトをより楽しくします。 お勧めです。


More articles:


All Articles