Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Легкая верстка в вынужденных местах: хелперы, декораторы, элементы форм

Anna | 20.06.2014 | нет комментариев
Многие теснее знают о том что во вьюхах не рекомендуется применять логику и вообще какие-либо манипуляции с данными. Для этого сходственный код переносят в декораторыкастомные элементы формы,компоненты и легко хелперы в конце-концов.

Подлинно, при таком подходе view-файлы начинают выглядить отменнее. Но кастомные элементы форм и хелперы становятся легко нестерпимыми.Но есть легкой и изящный метод как сделать их чище и проще…

К примеру возьмем кастомный элемент формы 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 Oriented HTML Views.

Он разрешает легко применять верстку в коде, а также создавать вторично используемые компоненты. Arbre рожден в плане acive_admin и является, по сути, его основой.

Ближе к делу

Начнем с добавление помощничка в базовый класс элементов форм. Это один из редких примеров уместного monkey patch.

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. Применение

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

Сразу позже обьявления компонент готов к применению в любом месте arbre-контекста. Сейчас взамен:

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

дозволено писать

row do
  ...

а на выходе получим код:

 <div>
   ...

В всеобщем arbre помогает сделать неотвратимое — верстку в коде, больше славным. Рекомендую.

 

Источник: programmingmaster.ru

 

Оставить комментарий
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB