ビューでは、ロジックを使用することはお勧めできず、通常はデータを操作することはお勧めできないことを多くの人がすでに知っています。 これを行うために、このようなコードは
デコレータ 、
カスタムフォーム要素 、
コンポーネント、そして最後にヘルパーに配置されます。
実際、このアプローチでは、ビューファイルの見栄えが良くなります。 しかし、カスタムフォーム要素とヘルパーは、単に耐えられません。
しかし、それらをよりクリーンで簡単にするシンプルでエレガントな方法があります...
たとえば、
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.使用する
アルブレ
生成されたタグを保存するためのバッファを取り除くことができます:
2.コードで迷惑な
content_tag
を使用する必要がなくなり、必要なタグを直接示すことができます。
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は避けられないものにするのに役立ちます-コード内のレイアウトをより楽しくします。 お勧めです。