bem-site / bem-forum-content-ru

Content BEM forum for Russian speak users
MIT License
56 stars 6 forks source link

bemhtml. Не получается пробросить контент #761

Closed karalkou closed 8 years ago

karalkou commented 8 years ago

В 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' }
        ]}
    ]
})
tadatuta commented 8 years ago

@karalkou Код как код, ничего явно кривого не вижу. Что именно хочется сделать и что не получается?

Пока могу лишь порекомендовать использовать шоткаты в deps.js:

({
    mustDeps: [
        { block: 'event-line', elems: ['item', 'city', 'date', 'place', 'type']},
    ],
    shouldDeps: [
        'btn',
        'img',
        {
            elems: ['logo', 'text', 'title', 'button' ]
        }
    ]
})
karalkou commented 8 years ago

@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 ничего не приходит

block('event-line')(
    content()(function(){
        return [
           {
               elem: 'date',
               elemMods: this.ctx.event.date.visibilityMod,
               content:  this.ctx.event.date.content ? this.ctx.event.date.content : 'hello, world' /* т.е. на страницу внутри блока .article-preview выводится  hello, world */
           },
           {
               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
           }
      ];
    })
)
tadatuta commented 8 years ago

Причина в том, что шаблон event-line ожидает данные в полях date, city, place и type в виде объектов, а в шаблоне article-preview они передаются с дополнительной вложенностью в массив.

Кстати, рекомендую вынести this.ctx.event в переменную и не копипастить эту часть везде.

karalkou commented 8 years ago

точно. Спасибо огромное. Что-то перегрелся)