Входные данные — BEMJSON

Введение

Любой JS-объект уже можно считать BEMJSON-ом. Но, чтобы управлять результатом шаблонизации, нам понадобятся стандартные поля, которые bem-xjst ожидает.

Соглашение о стандартных полях BEMJSON

• block — имя блока

• elem — имя элемента

• mods — хеш модификаторов блока

• elemMods — хеш модификаторов элемента

• content — дочерние узлы

• mix — БЭМ-сущности, которые нужно примиксовать

• bem — нужно ли добавлять классы и JS-параметры для самой БЭМ-сущности и её миксов

• js — JS-параметры

• attrs — хеш HTML-атрибутов

• cls — HTML-класс

• tag — HTML-тег

• пользовательские поля

block

{String} имя блока.

// BEMJSON
{ block: 'page' }

elem

{String} имя элемента.

// BEMJSON
{
    block: 'page',
    content: {
        // В этом узле блок указывать необязательно, он берётся из контекста (page).
        elem: 'header'
    }
}

mods

{Object} хеш модификаторов блока. Ключами могут быть любые корректные ключи для JS-объектов. Значения могут быть типа String или Boolean.

// BEMJSON
{
    block: 'tab',
    mods: { name: 'index', visible: true }
}

Результат шаблонизации:

<div class="tab tab_name_index tab_visible"></div>

mods будет проигнорирован если указаны elem и elemMods.

// BEMJSON
{
    block: 'control',
    // Будет проигнорирован, так как указаны elem и elemMods
    mods: { type: 'nav' },
    elem: 'input',
    elemMods: { type: 'search' }
}

Результат шаблонизации:

<div class="control__input control__input_type_search"></div>

elemMods

{Object} хеш модификаторов элемента. elemMods не будет учитываться, если не указан элемент.

// BEMJSON
{
    block: 'page',
    elem: 'header',
    elemMods: { type: 'search' }
}

content

{*} Дочерние узлы.

// BEMJSON
{
    block: 'page',
    content: [
        { block: 'header'},
        { block: 'article', content: '…' },
        '© 2017'
    ]
}

Объект с полем html является специальным типом возможных объектов в BEMJSON. Все другие поля в этом объекте будут проигнорированы. В поле html ожидается строка, которая будет выведена без изменений.

{
    block: 'markup',
    content: {
        html: '<code>new Date();</code>'
    }
}

Результат шаблонизации:

<div class="markup"><code>new Date();</code></div>

mix

{Object|Object[]|String} БЭМ-сущности, которые нужно примиксовать к текущей.

// BEMJSON
{
    block: 'link',
    mix: { block: 'controller' }
}

Результат шаблонизации:

<div class="link controller"></div>

js

{Boolean|Object} JS-параметры. Если значение не falsy, то миксует i-bem и добавляет содержимое в JS-параметры. По умолчанию undefined.

Подробнее про i-bem и JS-параметры.

// BEMJSON
{
   block: 'link',
   js: true
}

Результат шаблонизации:

<div class="link i-bem" data-bem='{"link":{}}'></div>

Значения будут экранированы:

// BEMJSON
{
   block: 'link',
   js: { title: 'film "Sid & Nancy"' }
}

Результат шаблонизации:

<div class="link i-bem" data-bem='{"link":{title:"film &#39;Sid &amp; Nancy&#39;"}}'>
</div>

bem

{Boolean} указывает шаблонизатору, нужно ли добавлять классы и JS-параметры для самой БЭМ-сущности и её миксов. По умолчанию true.

// BEMJSON
{
    block: 'menu',
    elem: 'item',
    bem: false
}

Результат шаблонизации:

<div></div>

attrs

{Object} хеш HTML-атрибутов. Значения атрибутов будут экранированны функцией attrEscape.

// BEMJSON
{
    attrs: {
        id: 'anchor',
        name: 'Мультфильм "Tom & Jerry"'
    }
}

Результат шаблонизации:

<div id="anchor" name="Мультфильм &quot;Tom &amp; Jerry&quot;"></div>

Если любое поле объекта attrs содержит БЭМ-cущность (в данном случае просто объект с полями block/elem/mods/elemMods), то для такого объекта шаблонизатор попробует применить шаблоны. Пример:

// BEMJSON
{
    block: 'button',
    attrs: {
        'data-text': {
            block: 'i-bem',
            elem: 'i18n',
            key: 'button-success'
        }
    }
}

// Шаблон
block('i-bem').elem('i18n')({
  // Здесь I18N.get просто метод, который возвратит строку
  def: (node, ctx) => node.I18N.get(ctx.key)
});

Результат шаблонизации:

<div id="button" data-text="Поздравляем!"></div>

cls

{String} HTML-класс или классы (через пробел), не принадлежащие к предметной области БЭМ. Например, применение микроформатов или семантической разметки из schema.org.

// BEMJSON
{
    block: 'user',
    cls: 'h-card p-name',
    content: 'Андрей Линде'
}

Результат шаблонизации:

<div class="user h-card p-name">Андрей Линде</div>

tag

{Boolean|String} HTML-тег. false или '' укажет движку BEMHTML пропустить этап генерации HTML-тега. По умолчанию div.

// BEMJSON
{
    tag: false,
    content: 'start'
}

Результат шаблонизации:

start

Пользовательские поля

Вы можете добавлять любые другие поля с данными, чтобы потом обработать их в теле шаблона по своему усмотрению.

// BEMJSON
{
    block: 'link'
    url: '/',
    target: '_blank'
}

Подробнее о том, как обрабатывать пользовательские поля BEMJSON, читайте в разделе про шаблоны.

Читать далее: синтаксис шаблонов