На выходе после 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
). Тогда контекст сохранится. Кмк, это будет меньшим из зол.