Руководство по переходу на версию 1.0.0
BH 4.0
В шаблонизаторе BH, начиная с версии 4.0
, произошли следующие изменения:
i-bem
CSS-класс i-bem
теперь добавляется не только к блокам, но и к элементам.
Чтобы отключить добавление класса к элементам, следует использовать опцию bhOptions со значением { jsElem: false }
.
Пустые атрибуты
Пустой атрибут — это сокращенное представление булевого атрибута.
Изменился генерируемый HTML-код для булевых BEMJSON-атрибутов со значением true
.
{
block: 'button',
attrs: {
disabled: true
}
}
Было:
<div class="button i-bem" disabled="disabled"></div>
Стало:
<div class="button i-bem" disabled></div>
Обход БЭМ-дерева
Текущий узел дерева (аргумент json
метода match
) теперь возвращается в стандартном BEMJSON-формате.
Вместо полей blockName
, blockMods
и mods
следует использовать block
, mods
и elemMods
, соответственно.
Было:
bh.match('button', function (ctx, json) {
json.blockName // имя блока
json.blockMods // объект модификаторов блока
json.mods // объект модификаторов элемента
});
Стало:
bh.match('button', function (ctx, json) {
json.block // имя блока
json.mods // объект модификаторов блока
json.elemMods // объект модификаторов элемента
});
BEM.I18N
Модуль BEM.I18N
не доступен из bh.lib.i18n
по умолчанию. Теперь его нужно подключать так же, как и любые другие сторонние библиотеки. Подробнее об этом читайте в разделе Интернационализация.
При использовании технологии bh-bundle следует воспользоваться опцией requires:
var BHBundleTech = require('enb-bh/techs/bh-bundle');
node.addTech([BHBundleTech, {
requires: {
i18n: { globals: 'BEM.I18N' }
}
}]);
Для технологии bh-commonjs следует оперировать CommonJS-модулями и предоставить BEM.I18N
в пространство имен bh.lib
самостоятельно:
var BEM = { I18N: require('path/to/i18n-module') },
BH = require('bundle.bh.js');
BH.lib.i18n = BEM.I18N;
module.exports = BH;
Технологии
Технологии в пакете можно разделить на две группы:
Сборка BH-шаблонов
Технологии
bh-client
,bh-client-module
иbh-server-include
объединены в одну — bh-bundle.Технология
bh-server
переименована в bh-commonjs.
Как выбрать технологию?
Выбор технологии зависит от предполагаемой среды исполнения скомпилированных шаблонов:
Про использование шаблонов читайте в разделе «Работа с технологиями»
Исполнение шаблонов в Node.js
Если шаблонизировать нужно исключительно в Node.js
, то вместо bh-server
можно выбрать технологию bh-commonjs.
Исполнение шаблонов в браузере
Для шаблонизации в браузере вместо bh-client
или bh-client-module
следует использовать bh-bundle вне зависимости от наличия модульной системы.
Исполнение шаблонов и в браузере, и в Node.js
Чтобы исполнять одни и те же шаблоны как в браузере, так и в Node.js, нужно использовать bh-bundle технологию.
Важно: шаблоны и подключаемые библиотеки не должны содержать кода, специфичного для какой-то конкретной среды исполнения.
Настройка BH
Для настройки шаблонизатора BH вместо опций jsAttrName
, jsAttrScheme
и clsNobaseMods
следует использовать опцию bhOptions.
Было:
{
jsAttrName: 'data-bem',
jsAttrScheme: 'json',
clsNobaseMods: false
}
Стало:
{
bhOptions: {
jsAttrName: 'data-bem',
jsAttrScheme: 'json',
clsNobaseMods: false
}
}
Изолированность шаблонов
Раньше все шаблоны, собранные с помощью технологий bh-client
, bh-client-module
или bh-server-include
, выполнялись в одной области видимости.
Шаблон 1:
var text = 'Hello!';
bh.match('text-1', function (ctx) {
ctx.content(text);
});
Шаблон 2:
bh.match('text-2', function (ctx) {
// Переменная `text` будет доступна, контент — 'Hello!'
ctx.content(text);
});
В технологии bh-bundle каждый шаблон изолирован от всех других.
Шаблон 1:
var text = 'Hello!';
bh.match('text-1', function (ctx) {
ctx.content(text);
});
Шаблон 2:
bh.match('text-2', function (ctx) {
ctx.content(text); // Получим ошибку 'ReferenceError: text is not defined'
});
Для выполнения шаблонов в общей области видимости нужно использовать опцию scope cо значением global
.
Получение HTML-файла
Технология html-from-bemjson
переименована в bemjson-to-html.
Вместо опции destTarget
следует использовать target, а вместо bemjsonTarget
— bemjsonFile.
Было:
var HtmlFromBemjsonTech = require('enb-bh/techs/html-from-bemjson');
node.addTech([HtmlFromBemjsonTech, {
destTarget: '?.html',
bemjsonTarget: '?.bemjson.js'
}]);
Стало:
var BemjsonToHtmlTech = require('enb-bh/techs/bemjson-to-html');
node.addTech([BemjsonToHtmlTech, {
target: '?.html',
bemjsonFile: '?.bemjson.js'
}]);
Технология bemjson-to-html-i18n
была удалена. Для получения HTML на основе BEMJSON
и локализационных файлов следует использовать технологии из пакета enb-bem-i18n
.
Зависимости
Раньше в package.json
нужно было указывать версию пакета bh
, т.к. bh
являлся peer-зависимостью для enb-bh
.
"dependencies": { "bh": "3.3.0", "enb": "0.16.0", "enb-bh": "0.5.0" }
Теперь этого делать не нужно: всегда будет устанавливаться последняя версия bh@4.x
.
"dependencies": { "enb": "0.16.0", "enb-bh": "1.0.0" }