Skip to content

Latest commit

 

History

History
275 lines (201 loc) · 13.4 KB

Контекст-узла.md

File metadata and controls

275 lines (201 loc) · 13.4 KB

Контекст узла

ВАЖНО. Методы apply и apply_next доступны ТОЛЬКО в теле шаблона.

ВАЖНО. Методы ctx и content доступны ТОЛЬКО в теле шаблона при режимах replace и content.

Контекст текущего узла доступен в предикате и теле шаблона, если они являются Proc, lambda или &block.

Список основных методов доступных в предикате и теле шаблона

attrs, bem, bem_cascade, block, cls, elem, first?, js, last?, mix, mods, name, params, position, tag.

Метод attrs

Возвращает список атрибутов в виде хеша (Hash) ключи которого ВСЕГДА имеют тип Symbol.

Добавить key: :value к изначальным атрибутам блока с названием alert:

/ Эквивалентные записи
= render_component :alert do |template|
  = template.block(:alert).attrs ->(node) { { **node.attrs, key: :value } }

= render_component :alert do |template|
  = template.block(:alert).attrs ->(node) { node.attrs.merge!(key: :value) }

Добавить css класс css-class если текущая сущность является блоком с названием alert и имеет атрибут с названием :role:

= render_component :alert do |template|
  = template.block(:alert, ->(node) { node.attrs.key?(:role) }).add_cls :css_class

Метод bem

Возвращает значение параметра bem. Если параметр не был передан, тогда возвращаемое значение будет nil.

Метод bem_cascade

Возвращает значение параметра bem_cascade. Если параметр не был передан, тогда возвращаемое значение будет nil.

Метод block

Возвращает значение параметра block. Если параметр не был передан, тогда возвращаемое значение будет пустая строка ''.

Метод cls

Возвращает нормализованный список css классов ввиде массива (Array) строк (String).

В шаблоне и предикате метод cls вернет: ['css-class1', 'css-class2']:

/ Содержимое файла index.html.slim компонента simple_component
= define_component do |component|
  = component.block :block1, cls: 'css-class1 css-class2'

Добавить css класс css-class если текущая сущность является блоком с названием block1 и имеет css класс css-class1:

= render_component :simple_component do |template|
  = template.block(:block1, ->(node) { node.cls.include?('css-class1') }).add_cls :css_class

Добавить css класс css-class к изначальным css классам блока с названием block1:

/ Эквивалентные записи
= render_component :simple_component do |template|
  = template.block(:block1).cls ->(node) { [node.cls, :css_class] }

= render_component :simple_component do |template|
  = template.block(:block1).cls ->(node) { node.cls << :css_class }

Метод elem

Возвращает значение параметра elem, если сущность является блоком, тогда значение будет nil, если сущность является элементом и параметр не был передан, тогда возвращаемое значение будет пустая строка ''.

Метод first?

Возвращает true если текущий узел среди своих братьев/сестер (siblings) занимает первую позицию, если это не так, возвращает false.

= render_component :menu do |template|
  = template.elem(:item, ->(node) { node.first? }).add_cls :first

Метод js

Возвращает значение параметра js.

Метод last?

Возвращает true если текущий узел среди своих братьев/сестер (siblings) занимает последнюю позицию, если это не так, возвращает false.

= render_component :menu do |template|
  = template.elem(:item, ->(node) { node.last? }).add_cls :last

Метод mix

Возвращает нормализованный список миксов ввиде массива (Array) строк (String).

В шаблоне и предикате метод mix вернет ['block', 'block2__elem1', 'block2__elem2']:

/ Содержимое файла index.html.slim компонента simple_component
= define_component do |component|
  = component.block :block1, mix: [:block, block2: [:elem1, :elem2]]

Метод mods

Возвращает нормализованный список модификаторов в виде хеша (ActiveSupport::HashWithIndifferentAccess) со строковыми String и true значениями.

В шаблоне и предикате метод mods вернет {'enabled' => true, 'theme' => 'green-islands'}:

/ Содержимое файла index.html.slim компонента simple_component
= define_component do |component|
  = component.block :block1, mods: [:enabled, theme: :green_islands]]

HTML тег изменить на span если текущая сущность является блоком с названием block1 и имеет модификатор с названием theme и любым значением этого модификатора:

= render_component :simple_component do |template|
  = template.block(:block1, ->(node) { node.mods.key?(:theme) }).tag :span

HTML тег изменить на small если текущая сущность является блоком с названием block1 и имеет модификатор с названием theme и значением green-islands этого модификатора:

= render_component :simple_component do |template|
  = template.block(:block1, mods: { theme: :green_islands }).tag :small

Метод name

ВАЖНО. При формировании названия сущности, действуют правила преобразования знаков нижнего подчеркивания _ в тире - для Symbol и String

Возвращает название сущности.

Для блока без названия метод name вернет пустую строку '':

/ Содержимое файла index.html.slim компонента simple_component
= define_component do |component|
  = component.block

Для элемента без названия метод name вернет указанный в конфиге разделитель между блоком и элементом '__':

/ Содержимое файла index.html.slim компонента simple_component
= define_component do |component|
  = component.elem

Для элемента без указания блока метод name вернет '__elem-name':

/ Содержимое файла index.html.slim компонента simple_component
= define_component do |component|
  = component.elem '', :elem_name

Для элемента с указанием только блока метод name вернет 'block-name__':

/ Содержимое файла index.html.slim компонента simple_component
= define_component do |component|
  = component.elem :block_name

Метод params

Хеш (Hash) содержит данные которые были переданы при вызове методов ctx, content, apply и apply_next.

Метод position

Возвращает порядковый номер узла, который он занимает среди своих братьев/сестер (siblings), нумерация начинается с 1.

Метод tag

Возвращает нормализованное значение параметра tag как Symbol (все значения с типом Symbol возвращаются как есть а не пустые строки String преобразуются с помощью to_sym), '' (для false и пустой строки '') или nil.

Список дополнительных методов доступных в теле шаблона

apply, apply_next, ctx, content.

Метод apply(mode, **params)

ВАЖНО. Методы apply и apply_next доступны ТОЛЬКО в теле шаблона.

Позволяет вызвать любой основной режим (Symbol) в контексте текущего узла, дополнительно можно передать параметры которые будут доступны в params.

/ Содержимое файла bemhtml.slim компонента alert
= define_templates do |template|
  = template.block(:alert).add_cls ->(node) { "alert-#{node.params.fetch(:type, :info)}" }

Вызов компонента alert с указанием значения type в params:

= render_component :alert do |template|
  = template.block(:alert).cls ->(node) { node.apply(:cls, type: :success) }

Метод apply_next(**params)

ВАЖНО. Методы apply и apply_next доступны ТОЛЬКО в теле шаблона.

Позволяет вызвать следующий по очередности шаблон для текущего режима, дополнительно можно передать параметры которые будут доступны в params.

/ Содержимое файла bemhtml.slim компонента alert
= define_templates do |template|
  = template.block(:alert).add_cls ->(node) { "alert-#{node.params.fetch(:type, :info)}" }

Вызов компонента alert с указанием значения type в params:

= render_component :alert do |template|
  = template.block(:alert) do |alert|
    = alert.cls ->(node) { node.apply(:cls, type: node.params.fetch(:type, :success)) }
    = alert.cls ->(node) { node.apply_next(type: :danger) }

Метод ctx(**params)

ВАЖНО. Методы ctx и content доступны ТОЛЬКО в теле шаблона при режимах replace и content.

Ссылка на текущий узел, дополнительно можно передать параметры которые будут доступны в params у самого узла и всех его дочерних узлов.

Заменить блок alert на самого себя:

/ Эквивалентный результат
= render_component :alert do |template|
  = template.block(:alert).replace do |node|
    = node.ctx

= render_component :alert

Обернуть блок alert в дополнительный блок и элемент:

= render_component :alert do |template|
  = template.block(:alert).replace do |node, builder|
    = builder.block :top_block do |top_block|
      = top_block.elem :elem_name
        = node.ctx

Метод content(**params)

ВАЖНО. Методы ctx и content доступны ТОЛЬКО в теле шаблона при режимах replace и content.

Ссылка на содержимое текущего узла, дополнительно можно передать параметры которые будут доступны в params у всех дочерних узлов.

Заменить содержимое блока alert на само себя:

/ Эквивалентный результат
= render_component :alert do |template|
  = template.block(:alert).content do |node|
    = node.content

= render_component :alert

Обернуть содержимое блока alert в дополнительный блок и элемент:

= render_component :alert do |template|
  = template.block(:alert).content do |node, builder|
    = builder.block :top_block do |top_block|
      = top_block.elem :elem_name
        = node.content

Заменить блок alert его содержимым:

/ Эквивалентный результат
= render_component :alert do |template|
  = template.block(:alert).replace do |node|
    = node.content

/ Будет быстрее
= render_component :alert do |template|
  = template.block(:alert).tag false