Skip to content

Latest commit

 

History

History
205 lines (163 loc) · 11.2 KB

Предикаты.md

File metadata and controls

205 lines (163 loc) · 11.2 KB
Raw

Предикаты

Позволяют указать условия для выбора узлов в структуре/дереве компонента.

Предикат block

С помощью предиката block можно задать условия для выбора узла(ов) с типом блок по БЭМ методологии в структуре/дереве компонента.

В качестве параметров можно указать:

  1. Название блока как String или Symbol, по умолчанию равно '*'.
  2. Вторым параметром можно передать условие, которым может быть Proc, lambda, название метода или какое-либо выражение, для Proc и lambda в качестве аргумента будет передан контекст (context) узла, для которого происходит проверка условий.
  3. mods задает список модификаторов которые должны присутствовать в списке модификаторов узла.
  4. mix задает список миксов которые должны присутствовать в списке миксов узла.
Примеры

Выбрать блоки с названием panel и заменить css классы:

= render_component :panel do |template|
  = template.block(:panel).cls :panel, :panel_success

Выбрать блоки с названием panel и применить несколько режимов:

/ Эквивалентные записи
= render_component :panel do |template|
  = template.block(:panel).cls :panel, :panel_success
  = template.block(:panel).bem true
  = template.block(:panel).js true

= render_component :panel do |template|
  = template.block(:panel) do |panel|
    = panel.cls :panel, :panel_success
    = panel.bem true
    = panel.js true

Выбрать все блоки(с любым названием) и выключить генерацию данных связанных с БЭМ методологией:

/ Эквивалентные записи
= render_component :panel do |template|
  = template.block.bem false

= render_component :panel do |template|
  = template.block('*').bem false

Выбрать блоки без названия и выключить генерацию данных связанных с БЭМ методологией:

= render_component :panel do |template|
  = template.block('').tag false

Выбрать все блоки которые занимают первую позицию среди своих братьев/сестер(siblings) и заменить их на строку 'Plain text':

= render_component :panel do |template|
  = template.block('*', ->(node) { node.first? }).replace 'Plain text'

Выбрать блоки у которых есть микс block__elem и заменить их содержимое на строку 'Plain text':

= render_component :panel do |template|
  = template.block(mix: { block: :elem }).content 'Plain text'

Выбрать блоки у которых есть модификатор с названием enabled и значением true и добавить js атрибуты:

= render_component :panel do |template|
  = template.block(mods: :enabled).js true

Предикат elem

С помощью предиката elem можно задать условия для выбора узла(ов) с типом элемент по БЭМ методологии в структуре/дереве компонента.

В качестве параметров можно указать:

  1. Название элемента как String или Symbol, по умолчанию равно '*'.
  2. Вторым параметром можно передать условие, которым может быть Proc, lambda, название метода или какое-либо выражение, для Proc и lambda в качестве аргумента будет передан контекст (context) узла, для которого происходит проверка условий.
  3. block название блока, как String или Symbol, по умолчанию равно '*'.
  4. mods задает список модификаторов которые должны присутствовать в списке модификаторов узла.
  5. mix задает список миксов которые должны присутствовать в списке миксов узла.
Примеры

Выбрать элементы с названием heading и заменить их контент/содержимое:

= render_component :panel do |template|
  = template.elem(:heading).content
    h3.panel-title Panel title

Выбрать элементы с названием heading и применить несколько режимов:

/ Эквивалентные записи
= render_component :panel do |template|
  = template.elem(:heading).cls :css_class
  = template.elem(:heading).bem true
  = template.elem(:heading).js true

= render_component :panel do |template|
  = template.elem(:heading) do |heading|
    = heading.cls :css_class
    = heading.bem true
    = heading.js true

Выбрать все элементы(с любым названием) и выключить генерацию данных связанных с БЭМ методологией:

/ Эквивалентные записи
= render_component :panel do |template|
  = template.elem.bem false

= render_component :panel do |template|
  = template.elem('*', block: '*').bem false

Выбрать элементы без названия и отключить отображение HTML тега:

= render_component :panel do |template|
  = template.elem('').tag ''

Выбрать все элементы которые занимают последнюю позицию среди своих братьев/сестер(siblings) и заменить их на строку 'Plain text':

= render_component :panel do |template|
  = template.elem('*', ->(node) { node.last? }).replace 'Plain text'

Выбрать элементы у которых есть микс block__elem и заменить HTML атрибуты:

= render_component :panel do |template|
  = template.block(mix: 'block__elem' }).attrs key: :val

Выбрать элементы у которых есть модификатор с названием theme и значением green_islands и добавить js атрибуты:

= render_component :panel do |template|
  = template.elem(mods: { theme: :green_islands }).js key: :val

Предикат match

С помощью предиката match можно задать условия для выбора узла(ов) с типом блок и/или элемент по БЭМ методологии в структуре/дереве компонента. Если условия заданы для блоков и элементов, тогда необходимо использовать &block см. примеры.

В качестве параметров можно указать:

  1. Условие, которым может быть Proc, lambda, название метода или какое-либо выражение, для Proc и lambda в качестве аргумента будет передан контекст (context) узла, для которого происходит проверка условий.
  2. block название блока, как String или Symbol, по умолчанию равно '*'.
  3. elem название элемента, как String или Symbol, по умолчанию равно '*'.
  4. mods задает список модификаторов которые должны присутствовать в списке модификаторов узла.
  5. mix задает список миксов которые должны присутствовать в списке миксов узла.
Примеры

Выбрать все блоки и элементы, и выключить генерацию данных связанных с БЭМ методологией:

/ Эквивалентные записи
= render_component :panel do |template|
  = template.match do |block, elem|
    = block.bem false
    = elem.bem false

= render_component :panel do |template|
  = template.match(block: '*', elem: '*') do |block, elem|
    = block.bem false
    = elem.bem false

Выбрать блоки без названия и отключить отображение HTML тега:

/ Эквивалентные записи
= render_component :panel do |template|
  = template.match(block: '', elem: false).tag ''

= render_component :panel do |template|
  = template.match(block: '', elem: nil).tag ''

Выбрать все элементы и отключить отображение HTML тега:

/ Эквивалентные записи
= render_component :panel do |template|
  = template.match(block: false).tag ''

= render_component :panel do |template|
  = template.match(block: nil).tag ''

Использование других параметров такое же как у предикатов block и elem.

Указание дополнительных условий с помощью specify

Метод specify позволяет указать дополнительные (уточнить) условия для предиката (выстроить цепочку условий), с учетом, что они еще не были объявлены до этого, есть исключения:

  1. Название блока можно переопределить если оно равно '*'
  2. Название элемента можно переопределить если оно равно '*' или nil
  3. Условие которое идет вторым параметром у предикат block elem и первым параметром у match можно переопределять всегда
  4. Параметры mix и mods можно переопределить если они еще не были объявлены
Примеры
= render_component :panel do |template|
  = template.block(mix: :block) do |block|
    = block.specify(block: :block1).tag false
    = block.specify(block: :block2).tag true