В bemjson-файле описания страницы есть блоки .event-line и .article-preview. Внутри .article-preview используется .event-line. Не получается передать содержимое из bemjson в bemhtml. Все, до чего додумался уже проверил. Если у кого есть время, посмотрите, пожалуйста. Может подскажете, где проблема.
bemjson
{
block: 'event-line',
event: {
date: {
content: '19.11.2015',
visibilityMod: { visibility: true }
},
city: {
content: 'Ростов-на-Дону',
visibilityMod: { visibility: true }
},
place: {
content: 'Конгресс-отель "Амакс"',
visibilityMod: { visibility: true }
},
type: {
content: '',
visibilityMod: { visibility: false }
}
}
}
...
{
block: 'article-preview',
/*attrs: { style: 'display:none;' },*/
mods: { color: 'white' },
mix: [{ block: 'row' }],
logoWrap: {
mix: [
{ block: 'col-md-offset-1' },
{ block: 'col-md-3' }
],
},
logo: {
url: '/img/stories/autor-logo.jpg',
mix: { block: 'article-preview', elem: 'img', elemMods: { size: 'm' } },
mods: { circle: true, responsive: true },
},
title: {
content: 'Продвижение себя: строим личный бренд',
mix: { block: 'title', mods: { 'main-page': 'screen'} },
mods: {}
},
/* description of block .event-line */
event: {
date:{
content: '12.11.2015',
visibilityMod: { visibility: true }
},
city: {
content: 'Ростов-на-Дону',
visibilityMod: { visibility: false }
},
place: {
content: '',
visibilityMod: { visibility: false }
},
type: {
content: 'Вебинар',
visibilityMod: { visibility: true }
},
},
/* the end of .event-line description */
text: {
content: 'Почему об одном бизнесмене пишут СМИ и даже книги, приглашают на конференции, ' +
'у него спрашивают совета и хотят с ним сотрудничать, а о другом нет, при прочих равных вводных? ' +
'В деле персональный бренд.',
mix: { block: 'font', mods: { 'family': 'robotothin'} },
mods: {}
},
button: {
content: 'Подробнее',
mix: { block: 'article-preview', elem: 'btn' },
mods: { color: 'red-transparent', 'main-page': 'large' }
}
}
article-preview.bemhtml
block('article-preview')(
content()(function(){
return [
{
elem: 'logo-wrap',
mix: this.ctx.logoWrap.mix ? this.ctx.logoWrap.mix : {},
content:
{
block: 'img',
mix : this.ctx.logo.mix ? this.ctx.logo.mix : {},
mods : this.ctx.logo.mods ? this.ctx.logo.mods : {},
url: this.ctx.logo.url
}
},
{
block: 'col-md-7',
content: [
{
block: 'article-preview',
mix : this.ctx.title.mix ? this.ctx.title.mix : {},
elem: 'title',
elemMods : this.ctx.title.mods ? this.ctx.title.mods : {},
content: this.ctx.title.content
},
/*----------------------------------------------------------*/
{
block: 'event-line',
event:
{
date: [
{
content: this.ctx.event.date.content,
visibilityMod: this.ctx.event.date.visibilityMod
}
],
city: [
{
content: this.ctx.event.city.content,
visibilityMod: this.ctx.event.city.visibilityMod
}
],
place: [
{
content: this.ctx.event.place.content,
visibilityMod: this.ctx.event.place.visibilityMod
}
],
type: [
{
content: this.ctx.event.type.content,
visibilityMod: this.ctx.event.type.visibilityMod
}
],
}
},
/*----------------------------------------------------------*/
{
block: 'article-preview',
mix : this.ctx.textMix ? this.ctx.textMix : {},
elem: 'text',
elemMods : this.ctx.text.mods ? this.ctx.text.mods : {},
content: this.ctx.text.content
},
{
block: 'btn',
mix : this.ctx.button.mix ? this.ctx.button.mix : {},
mods: this.ctx.button.mods ? this.ctx.button.mods : {},
content: this.ctx.button.content
}
]
}
]
})
)
event-line.bemhtml
block('event-line')(
content()(function(){
return [
{
elem: 'date',
elemMods: this.ctx.event.date.visibilityMod,
content: this.ctx.event.date.content
},
{
elem: 'city',
elemMods: this.ctx.event.city.visibilityMod,
mix: { block: 'link', mods: { color: 'white' } },
content: this.ctx.event.city.content
},
{
elem: 'place',
elemMods: this.ctx.event.place.visibilityMod,
mix: { block: 'link', mods: { color: 'white' } },
content: this.ctx.event.place.content
},
{
elem: 'type',
elemMods: this.ctx.event.type.visibilityMod,
mix: { block: 'link', mods: { color: 'white' } },
content: this.ctx.event.type.content
}
];
})
)
article-preview.deps.js
([
{
mustDeps: [
{ block: 'event-line'},
{ block: 'event-line', elem: 'item' },
{ block: 'event-line', elem: 'city'},
{ block: 'event-line', elem: 'date'},
{ block: 'event-line', elem: 'place'},
{ block: 'event-line', elem: 'type' }
]
},
{
shouldDeps: [
{ block: 'btn' },
{ block: 'img'},
{
elems: [
{ elem: 'logo' },
{ elem: 'text' },
{ elem: 'title' },
{ elem: 'button' }
]
}
]
}
])
event-line.deps.js
({
shoudDeps: [
{ elems: [
{ elem: 'item' },
{ elem: 'city' },
{ elem: 'date' },
{ elem: 'place' },
{ elem: 'type' }
]}
]
})
@karalkou Код как код, ничего явно кривого не вижу. Что именно хочется сделать и что не получается?
Пока могу лишь порекомендовать использовать шоткаты в deps.js:
@tadatuta добрый день) В bemjson страницы используются .event-line и .article-preview. .event-line используется и сам по себе, и внутри .article-preview Задумывал как бы пробрасывать контент из bemjson через шаблон article-preview.bemhtml в event-line.bemhtml. Сам event-line.bemhtml работает. Но при сборке .article-preview в поля event-line.bemhtml ничего не приходит
Причина в том, что шаблон
event-lineожидает данные в поляхdate,city,placeиtypeв виде объектов, а в шаблонеarticle-previewони передаются с дополнительной вложенностью в массив.Кстати, рекомендую вынести
this.ctx.eventв переменную и не копипастить эту часть везде.точно. Спасибо огромное. Что-то перегрелся)