BT
BT = BEViS Templater.
BT — это BT JSON-процессор. Его главная цель — превратить BT JSON в HTML.
Установка
BT-процессор и ENB-технологии для его использования можно найти в npm-пакете enb-bt
.
npm install enb-bt
Использование
BT-файлы в проекте имеют суффикс bt.js
. Например, b-page.bt.js
. Файл формируется в формате CommonJS
для NodeJS:
module { // ...};
Введение
BT — это шаблонизатор. Он позволяет превратить json-описание блоков в HTML. Полученный HTML потом можно вернуть в качестве ответа на HTTP-запрос, либо использовать для вставки в интерактивной JS-логике на клиенте.
Для преобразования в HTML используются матчеры, это функции, обрабатывающие ветви BT JSON дерева. В матчерах мы пишем, в какой HTML следует превратить тот или иной фрагмент BT JSON.
Например, выставим тег button
для блока button
:
bt;
Рассмотрим полное содержимое файла button.bt.js
:
module { // CommonJS-обертка, получаем инстанцию bt bt; };
В результате наш шаблон генерирует следующий HTML:
На основе BT JSON:
block: 'button'
Матчеры
Синтаксис матчеров:
void bt;
Существует возможность описать матчер сразу для нескольких селекторов:
void bt;
Рассмотрим синтаксис селектора:
'blockName[_view][__elementName]'
По-русски:
'блок[_имяОтображения][__имяЭлемента]'
(В квадратных скобках необязательные параметры)
Помимо блоков, можно писать селекторы на элементы блоков. Например, зададим тег span
элементу text
кнопки:
bt;bt;
Результат:
<!-- {block: 'button', title: 'Hello'} -->Hello
Для разделения стилей и шаблонов для различных вариантов одного блока были введены отображения — view. view участвует в селекторах.
Например:
bt;bt;
Результат:
<!-- {block: 'button', view: 'simple', title: 'Hello'} -->Hello <!-- {block: 'button', view: 'input', title: 'Hello'} --> <!-- {block: 'button', title: 'Hello'} // нет матчера для отсутствующего view -->
На основе view изменяется и CSS
-класс элементов. Для {block: 'button', view: 'simple'}
элемент text
получает класс button_simple__text
.
Селекторы можно писать на view по определенному префиксу. Например:
bt;
Результат:
<!-- {block: 'button', view: 'simple-red'} -->
Для тех или иных блоков можно установить view
по умолчанию:
module { bt; // ...};
Надо заметить, что в BEViS
отображение отделяется от поведения. Атрибут data-block
указывает на имя блока для привязки к JS, а CSS-классы участвуют в отображении.
Состояния
Неотъемлемой частью BEViS
являются состояния. Они используются для визуального отображения (с помощью CSS)
тех или иных ситуаций для блоков, элементов.
Состояния могут быть выставлены в шаблонах:
bt;
Результат:
<!-- {block: 'button', disabled: true} -->
Состояния могут принимать значения:
bt;
Результат:
<!-- {block: 'popup'} -->
Миксины
Миксины — классы, имеющие дополнительное поведение для тех или иных блоков. Миксины могут подмешиваться только к блокам, но не к элементам.
Например, BT JSON:
block: 'input' mixins: name: 'auto-focus'
С матчером:
bt;
Превращается в HTML:
В дальшнейшем, при инициализации страницы, миксин будет инстанцирован для данного блока.
Автоматическая инициализация
Автоматическая инициализация — это инициализация блоков при загрузке страницы. Она может требоваться самим блоком в шаблоне:
bt;
А может быть указана в BT JSON:
block: 'button' autoInit: true
В обоих случаях HTML-элемент кнопки получает класс _init
, который сообщает YBlock
о том,
что данный блок следует инициализировать автоматически.
Данные
Исходными данными (BT JSON) являются:
- Имя блока:
block
—ctx.getBlockName()
. - Имя элемента:
elem
—ctx.getElementName()
. - Имя отображения:
view
—ctx.getView()
- Миксины блока:
mixins
—ctx.getMixins()
- Флаг автоматической инициализации:
autoInit
—ctx.isAutoInitEnabled()
- Прочие параметры, которые можно достать в шаблоне с помощью
ctx.getParam('paramName')
.
Результирующие данные:
- Имя тега:
ctx.setTag('button')
. - Атрибуты:
ctx.setAttr('href', '/')
. - Состояния:
ctx.setState('disabled')
. - Миксины блока:
mixins
—ctx.addMixin({name: 'auto-focus', opt: 1})
- Флаг автоматической инициализации:
ctx.enableAutoInit()
. - Опции инициализации блока:
ctx.setInitOption('optName', 'optValue')
. - Содержимое:
ctx.setContent({ elem: 'sub' })
. - Содержимое с отключенным эскейпингом:
ctx.setContent({ raw: { elem: 'sub' } })
.