| Field |
Value |
Value type |
Example |
block |
Block name |
String |
{ block: 'menu' } |
elem |
Element name |
String |
{ elem: 'item' } |
mods |
Block modifiers |
Object containing the names and values of block modifiers as key-value pairs:
{modifier_name: 'modifier_value'}
|
{
block: 'link',
mods: { pseudo: true, color: 'green' }
}
|
elemMods |
Element modifiers |
Object containing the names and values of element modifiers as key-value pairs:
{modifier_name: 'modifier_value'}
|
{
elem: 'item',
elemMods: { selected: 'yes' }
}
|
mix |
Mixed blocks/elements |
Array of objects that describe mixed blocks and elements or Object interpreted as an array consisting of a single element. |
{
block: 'link',
mix: [ { block: 'serp-item', elem: 'link' } ]
}
|
**See also**:
* [Context-aided completion of BEM entities](https://ru.bem.info/technology/bemhtml/current/templating/#extensionbem) (Russian version only)
| Field |
Value |
Value type |
Example |
tag |
HTML tag for the current entity |
String |
{
block: 'my-block',
tag: 'img'
}
|
attrs |
HTML attributes for the current entity |
Object |
{
block: 'my-block',
tag: 'img',
attrs: { src: '//yandex.ru/favicon.ico', alt: '' }
}
|
cls |
Line added to the HTML attribute class (besides automatically generated classes) |
String |
{
block: 'my-block',
cls: 'some-blah-class'
}
|
bem |
Flag to cancel the generation of BEM classes in the HTML attribute class for the current entity |
Boolean |
{
block: 'page',
tag: 'html',
bem: false
}
|
js |
Either flag to indicate the presence of client JavaScript in the entity or JavaScript parameters |
Boolean|Object |
{
block: 'form-input',
mods: { autocomplete: 'yes' },
js: {
dataprovider: { url: 'http://suggest.yandex.ru/...' }
}
}
|
Note that the names and meanings of these HTML-specific BEMJSON fields are equivalent to those of the corresponding BEMHTML [standard modes](https://en.bem.info/technology/bemhtml/current/reference/#standardmoda) (tags, attributes, classes, etc.) If the same HTML aspects are specified **in both the input data and BEMHTML templates**, the values specified in the BEMHTML templates take priority.
During the HTML generation process, the BEMHTML template engine will perform one of two actions:
* **Merge** the values of the HTML parameters set in the BEMJSON with those specified in the BEMHTML template. Such merging is done only for those parameters where it makes obvious sense: `attrs`, `js`, `mix`.
* **Override** the values of the HTML parameters set in the BEMJSON with those specified in the **BEMHTML template**. This is done for all other values: `tag`, `cls`, `bem`, `content`.
| Поле |
Значение |
Тип значения |
Пример |
block |
Имя блока |
Строка |
{ block: 'menu' } |
elem |
Имя элемента |
Строка |
{ elem: 'item' } |
mods |
Модификаторы блока |
Объект, содержащий имена и значения модификаторов в качестве пар ключ-значение:
{имя_модификатора: 'значение_модификатора'}
|
{
block: 'link',
mods: { pseudo: true, color: 'green' }
}
|
elemMods |
Модификаторы элемента |
Объект, содержащий имена и значения модификаторов элемента в качестве пар ключ-значение:
{имя_модификатора: 'значение_модификатора'}
|
{
elem: 'item',
elemMods: { selected: 'yes' }
}
|
mix |
Подмешанные блоки/элементы |
Массив, содержащий объекты, описывающие подмешанные блоки и элементы. В качестве значения может выступать
объект, который трактуется как массив, состоящий из одного элемента. |
{
block: 'link',
mix: [ { block: 'serp-item', elem: 'link' } ]
}
|
**См. также**:
* [Достраивание БЭМ-сущностей по контексту](https://ru.bem.info/technology/bemhtml/current/templating/#extensionbem)
| Поле |
Значение |
Тип значения |
Пример |
tag |
HTML-тег для данной сущности |
String |
{
block: 'my-block',
tag: 'img'
}
|
attrs |
HTML-атрибуты для данной сущности |
Object |
{
block: 'my-block',
tag: 'img',
attrs: { src: '//yandex.ru/favicon.ico', alt: '' }
}
|
cls |
Строка, добавляемая к HTML-атрибуту class (помимо автоматически генерируемых классов) |
String |
{
block: 'my-block',
cls: 'some-blah-class'
}
|
bem |
Флаг — отменить генерацию БЭМ-классов в HTML-атрибуте class для данной сущности |
Boolean |
{
block: 'page',
tag: 'html',
bem: false
}
|
js |
Либо флаг о наличии клиентского JavaScript у данной сущности, либо параметры JavaScript |
Boolean|Object |
{
block: 'form-input',
mods: { autocomplete: 'yes' },
js: {
dataprovider: { url: 'http://suggest.yandex.ru/...' }
}
}
|
Обратите внимание, что имена и смысл полей BEMJSON, управляющих HTML-представлением, совпадают с именами и смыслом соответствующих [стандартных мод](https://ru.bem.info/technology/bemhtml/current/reference/#standardmoda) BEMHTML (тег, атрибуты, класс и т.п.). В случае, если какие-то из аспектов выходного HTML заданы **и во входных данных, и в BEMHTML-шаблонах**, более высокий приоритет имеют значения, заданные в BEMHTML-шаблонах.
При генерации HTML будет выполнено одно из двух действий:
* **Объединение** значений HTML-параметров, заданных в BEMJSON, cо значениями параметров, заданных в BEMHTML-шаблоне. Объединение значений производится только для тех параметров, для которых оно имеет очевидный смысл: `attrs`, `js`, `mix`.
* **Замещение** значений HTML-параметров, заданных в BEMJSON, значениями, заданными в **BEMHTML-шаблоне**. Выполняется для всех прочих значений: `tag`, `cls`, `bem`, `content`.
**NB:** Приоритет BEMHTML-шаблонов позволяет **автору шаблонов** принимать решение, какие HTML-параметры будут приоритетнее в каждом конкретном случае: заданные в BEMHTML или в BEMJSON. Значения HTML-параметров, заданных в BEMJSON, доступны в шаблонах при обращении к фрагменту входного BEMJSON-дерева в контексте (поле `this.ctx`).