BH (шаблонизатор)

BH
Тип	Шаблонизатор
Разработчик	Сообщество БЭМ
Написана на	JS, PHP (официальные версии)
Операционная система	Кроссплатформенное программное обеспечение
Лицензия	MIT License
Сайт	bem.github.io/bh

BH (BEM HTML) — компилирующий обработчик декларативных шаблонов для JS.

BH позволяет видоизменять узлы DOM-дерева аналогично тому, как это делает CSS — в декларативной форме.

Пример

Имея декларацию на JS:

bh.match('button', function(ctx) {
    ctx.tag('button');
});
bh.match('button_legacy', function(ctx, json) {
    ctx.tag('input');
    ctx.attr('type', 'button');
    ctx.attr('value', json.content);
});
bh.match('button_submit', function(ctx, json) {
    ctx.tag('input');
    ctx.attr('type', 'submit');
    ctx.attr('value', json.content);
});

Или аналогичную декларацию в синтаксисе PHP:

$bh->match('button', function($ctx) {
    $ctx->tag('button');
});
$bh->match('button_legacy', function($ctx, $json) {
    $ctx->tag('input');
    $ctx->attr('type', 'button');
    $ctx->attr('value', $json->content);
});
$bh->match('button_submit', function($ctx, $json) {
    $ctx->tag('input');
    $ctx->attr('type', 'submit');
    $ctx->attr('value', $json->content);
});

И входные данные:

[ { "block" : "button",
    "content" : "Просто кнопка" },
  { "block" : "button",
    "mods" : { "submit": true },
    "content" : "Кнопка отправить" },
  { "block" : "button",
    "mods" : { "legacy": true },
    "content" : "Кнопка по старому стилю" },
  { "block" : "button",
    "mods" : { "legacy": true, "submit": true },
    "content" : "Кнопка отправить по старому стилю" } ]

Получим результат:

<button class="button">Просто кнопка</button>
<input class="button button_submit" type="submit" value="Кнопка отправить"/>
<input class="button button_legacy" type="button" value="Кнопка по старому стилю"/>
<input class="button button_legacy button_submit" type="submit" value="Кнопка отправить по старому стилю"/>

Реализации

Официальные реализации BH написаны на JavaScript и PHP.

См. также

• БЭМ
• BEMHTML

Ссылки

• Официальный сайт
• Официальный сайт методологии БЭМ
• Документация на сайте методологии БЭМ
• BH.js на GitHub
• BH.php на GitHub