मजबूर स्थानों में आसान लेआउट: सहायक, सज्जाकार, फार्म तत्व

कई पहले से ही जानते हैं कि विचारों में तर्क का उपयोग करने की अनुशंसा नहीं की जाती है और आम तौर पर डेटा के साथ कोई हेरफेर होता है। ऐसा करने के लिए, इस तरह के कोड को डेकोरेटर , कस्टम फॉर्म एलिमेंट्स , कंपोनेंट्स और अंत में सिर्फ हेल्पर्स में रखा जाता है।

दरअसल, इस दृष्टिकोण के साथ, दृश्य फाइलें बेहतर दिखना शुरू हो जाती हैं। लेकिन कस्टम रूप तत्व और सहायक बस असहनीय हैं।

लेकिन उन्हें साफ और आसान बनाने के लिए एक सरल और सुरुचिपूर्ण तरीका है ...



उदाहरण के लिए, 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 Object Orient HTML Views का उपयोग करना है।

यह कोड में लेआउट का उपयोग करना आसान बनाता है, साथ ही पुन: प्रयोज्य घटकों का निर्माण करता है। Arbre का जन्म acive_admin प्रोजेक्ट में हुआ था और वास्तव में इसकी नींव है।

बिंदु पर पहुँचो

आइए फार्म तत्वों के आधार वर्ग में एक सहायक को जोड़कर शुरू करें। यह एक उपयुक्त बंदर पैच के दुर्लभ उदाहरणों में से एक है।

 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 

सभी अनावश्यक को हटा दिया, केवल वही छोड़ दिया जो वास्तव में आवश्यक है। कोड अच्छे और स्पष्ट दिखता है।

अर्ब के लाभ

और इसलिए एक संक्षिप्त सारांश संक्षेप में प्रस्तुत करें।

1. उपयोग

Arbre

आप उत्पन्न टैग संग्रहीत करने के लिए बफर से छुटकारा पाने के लिए अनुमति देता है:

 #  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. और सबसे दिलचस्प बात घटक हैं।

मालिकाना घटक

एक और आश्चर्यजनक तथ्य यह है कि Arbre अपने स्वयं के तत्वों को जोड़ना और किसी भी संदर्भ में उनका उपयोग करना आसान बनाता है।

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

घोषणा के तुरंत बाद, यह घटक अम्ब्रे संदर्भ में कहीं भी उपयोग के लिए तैयार है। अब इसके बजाय:

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

लिख सकते हैं

 row do ... 

और आउटपुट में हमें कोड मिलता है:

  <div class="row"> ... 

सामान्य तौर पर, आर्बर कोड में अपरिहार्य - लेआउट को अधिक सुखद बनाने में मदद करता है। मैं इसकी सलाह देता हूं।