На выходе после BEMTREE шаблонизации выходит примерно такой bemjson
{
block: 'video'
content: [
{
elem: 'media',
urls: data.links,
},
{
elem: 'content',
content: [
{
elem: 'title',
content: data.title
},
{
elem: 'description',
content: data.description
}
]
}
]
}
Элемент __media с помощью bemhtml потом оборачивается в блок wrapper-block
Что нужно написать в блоке wrapper-block, чтобы он не менял в контексте block, чтобы не делать вот так:
{
block: 'video'
content: [
{
block: this.block,
elem: 'media',
urls: data.links,
},
{
block: this.block,
elem: 'content',
content: [
{
block: this.block,
elem: 'title',
content: data.title
},
{
block: this.block,
elem: 'description',
content: data.description
}
]
}
]
}
@adinvadim
bem-xjstработает таким образом, что если полеblockне задано явно, то оно обязано быть достроено из контекста. И если текущий контекст оказываетсяwrapper-block, то остается лишь явно задавать нужный блок самостоятельно.Другое дело, что это можно очень по-разному выразить в коде. Например:
Либо вместо оборачивания в
wrapper-blockзавернуть вvideo__inner, смиксованный сwrapper-block, тогда сохранится контекстvideo.О, с video__inner и правда крутое решение, спасибо! А еще такой вопрос, у меня многие блоки могут иметь или не иметь обертку
wrapper-blockи поэтому у многих пристуствует такой код, можно как-нибудь избежать большого повторения кода и написать что-то типа wrapped()(true)?Для оборачивания из коробки есть хелпер:
Это отвечает на вопрос или хочется чего-то другого?
Ого, круто, а много еще подобных хелперов, которых в доках нет, или я где-то не досмотрел?
Хочется уметь самому хелперы писать, где можно про это почитать?
Есть еще
replace()для замены блока новым деревом (чаще пригождается в BEMTREE):По поводу своих хелперов. Есть два варианта: положить хелпер в
this(будет доступен из всех блоков) или написать кастомную моду для селектора на*::fire: Спасибо большое за развернутый ответ!
у меня с этой проблемой появился еще один кейс, и не могу пока что найти нормальное решение
есть струкура:
Потом bemhtml оборачивает block__preview в блок link из bem-components, и соотвественно меняется контекст дальше и получается такой результат
block: this.blockрешает только ряд проблем, потому что помимо поля block в контексте изменилось еще поле modsblock: this.blockиmods: this.modsрешает проблемы, но это плохое решение, так как все модификаторы выставляются на элементы, что немного странно, по идеи чтобы повесить модификатор на элемент, нужно воспользоваться elemModsи получается что-то типо этого:
Возможно тут как-то можно доопределить шаблон link, но у меня идей нет
Можно явно сбросить
modsвundefined.Но точно ли нужна такая «магия» внутри BEMHTML? Я бы предложил строить полное дерево уже на этапе BEMTREE, а для BEMHTML оставить чисто «визуальные» штуки: кому какой тег задать, атрибуты и т.п.
PS: относительно контекстное обсуждение сегодня: https://github.com/bem/bem-forum-content-ru/issues/848 (в комментариях есть вариант решения с
wrap()).Тогда тут можно типо того сделать ? (пример)
Ибо чтобы проверять с помощью матчера на модификатор (пример), нужно проделать неприятные костыли для элементов
и в шаблоне потом
this.ctx.mods = undefinedчто может потом в даленейшем попортить жизньЯ бы в данном случае скорее сделал бы шаблон для
media-item__linkкопипастом изlink(к нему, если нужны стилиlink, можно добавить микс сlink). Тогда контекст сохранится. Кмк, это будет меньшим из зол.