-
Notifications
You must be signed in to change notification settings - Fork 0
Хелпер define_component
ВАЖНО. Необходимо только описывать структуру (дерево) компонента в терминах (блок и элемент) методологии БЭМ, создание css
классов и js
атрибутов из методологии БЭМ НЕ ОБЯЗАТЕЛЬНО.
ВАЖНО. В отличие от хелперов block_tag
и elem_tag
, генерация данных из методологии БЭМ зависит от параметра bem
в конфигурации.
ВАЖНО. Доступно использование BEMHTML шаблонов.
ВАЖНО. Для сущностей у которых не указано название, не будут созданы css классы и js атрибуты из методологии БЭМ.
Хелпер define_component
позволяет описывать структуру (дерево) компонента с помощью сущностей (блок и элемент) методологии БЭМ, благодаря этому, используя BEMHTML шаблоны можно более продвинутыми способами взаимодействовать с такими типами компонент.
При вызове define_component
обязательно нужно использовать &block
в который будет передан билдер (builder) для построения структуры (дерева) компонента.
Принимает такие же параметры как и хелпер block_tag
.
ВАЖНО. В отличие от block_tag
и elem_tag
, переданный в текущий узел параметр bem_cascade
распространяется на сам узел и все его дочерние узлы (блоки и элементы), даже если текущий узел является элементом.
Позволяет создавать блок из методологии БЭМ:
= define_component do |component|
= component.block content: 'Plain text'
= define_component do |component|
= component.block :block_name, content: 'Plain text'
= define_component do |component|
= component.block
span Content
/ bem_cascade: false применится к узлу и ко всем его дочерним узлам
= define_component do |component|
= component.block bem_cascade: false do |block|
= component.block :block2 do |block2|
= block2.elem :elem
= block.elem content: 'Plain text'
Принимает такие же параметры как и хелпер elem_tag
.
ВАЖНО. В отличие от block_tag
и elem_tag
, переданный в текущий узел параметр bem_cascade
распространяется на сам узел и все его дочерние узлы (блоки и элементы), даже если текущий узел является элементом.
Позволяет создавать элемент из методологии БЭМ:
= define_component do |component|
= component.elem content: 'Plain text'
= define_component do |component|
= component.elem :block_name, :elem_name, content: 'Plain text'
= define_component do |component|
= component.elem
span Content
/ bem_cascade: true применится к узлу и ко всем его дочерним узлам
= define_component do |component|
= component.elem bem_cascade: true
= component.block do |block|
= block.elem content: 'Plain text'
ВАЖНО. Переданные параметры через методы apply
, apply_next
, content
и ctx
не будут использоваться в узлах внутри метода text
.
Создает текстовый узел(TextNode
) в структуре(дереве) компонента, к узлам такого типа не применяются шаблоны BEMHTML и значение параметра tag
указано как false
, не принимает никаких дополнительных параметров.
Узлы с типом TextNode
предназначены ТОЛЬКО для расположения текста на определенном уровне в структуре(дереве), чтобы при рендеринге компонента не происходило выталкивание вверх текстовых вставок:
/ При такой структуре 'span Content' всплывет на верх
= define_component bem_cascade: true do |component|
= component.block :block_name
span Content
/ =>
/ <span>Content</span>
/ <div class="block-name"></div>
= define_component bem_cascade: true do |component|
= component.block :block_name
= component.text
span Content
/ =>
/ <div class="block-name"></div>
/ <span>Content</span>
= define_component bem_cascade: true do |component|
= component.block :block_name
= component.text 'Content'
/ =>
/ <div class="block-name"></div>
/ Content
В данном случае, результат будет одинаковым, но лучше избегать использование методов block
и elem
внутри метода text
:
= define_component bem_cascade: true do |component|
= component.block :block1
= component.text
= component.block :block2 do |block2|
= block2.elem :elem
= define_component bem_cascade: true do |component|
= component.block :block1
= component.block :block2 do |block2|
= block2.elem :elem
/ =>
/ <div class="block1"></div>
/ <div class="block2">
/ <div class="block2__elem"></div>
/ </div>
В define_component
можно передать такие же параметры как и в методы block
и elem
, которые будут значениями по умолчанию для узлов дерева (структуры) компонента:
/ Эквивалентные записи
= define_component do |component|
= component.block :block1, tag: :div, js: true, bem: true
= component.block :block2, tag: :div, js: true, bem: true do |block2|
= block2.elem :elem, tag: :div, js: true, bem: true
= define_component tag: :div, js: true, bem: true do |component|
= component.block :block1
= component.block :block2 do |block2|
= block2.elem :elem
/ =>
/ <div data-bem="{"block1":{}}" class="block1 i-bem"></div>
/ <div data-bem="{"block2":{}}" class="block2 i-bem">
/ <div data-bem="{"block2__elem":{}}" class="block2__elem i-bem"></div>
/ </div>
/ Переопределение дефолтных значений
= define_component tag: :div, js: true, bem: true do |component|
= component.block :block1, js: false
= component.block :block2, js: false do |block2|
= block2.elem :elem
/ =>
/ <div class="block1"></div>
/ <div class="block2">
/ <div data-bem="{"block2__elem":{}}" class="block2__elem i-bem"></div>
/ </div>