bem-site / bem-forum-content-ru

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

Изменение базового блока page #427

Open AndreyGladkov opened 9 years ago

AndreyGladkov commented 9 years ago

Мне нужно изменить базовый блок page следующим образом при навешивании модификатора sticky-push контент оборачивался оберткой добавлялся блок под контентом и подключался блок футера после данного контейнера

block('page').mod('sticky-push', true)(
    def()(function(){
        return applyCtx([
            {
                block: 'page-sticky-footer',
                content: [
                    {
                        tag: '',
                        content: this.ctx.content
                    },
                    {
                        block: 'sticky-push'
                    }
                ]
            },
            {
                block: 'footer'
            }
        ])
    })
);

Я написал следующий код, он не верен так как я юзаю this.ctx.content У меня естественно пропадают теги body и т/д

Guria commented 9 years ago

Блок page генерирует начиная с корневого тега html. Вы уверены, что хотите его оборачивать?

AndreyGladkov commented 9 years ago

я хочу обернуть его контент. тело все что внутри body

AndreyGladkov commented 9 years ago

Все я тупанул надо было так

block('page').mod('sticky-push', true)(

    content()(function(){
        return [
            {
                block: 'page-sticky-footer',
                content: [
                    {
                        tag: '',
                        content: this.ctx.content
                    },
                    {
                        block: 'sticky-push'
                    }
                ]
            },
            {
                block: 'footer'
            }
        ]
    })
);

Но тогда js не подключается на страницу(

qfox commented 9 years ago

Вообще, если в шаблонах используются подблоки — нужно их в deps прописывать, потому что пока из шаблонов их в процессе сборки не получить (и эта задача совсем не тривиальная).

AndreyGladkov commented 9 years ago

Не совсем понял, в deps.js у меня прописаны все блоки, css цепляется, все хорошо в этом решении, но почему-то скрипт который содержит весь js не подключается его тупо нет в html Если я его подключу ручками то все будет работать как я и хотел, но надо что бы его тула собирала

Guria commented 9 years ago

Блок page размещает подключаемые скрипты в самом низу тега body. Вы переопределили моду контент и не используете результаты других шаблонов по этой моде. Вам надо либо самостоятельно включить this.ctx.scripts в вашем шаблоне моды content или получить результат выполнения библиотечной моды content с помощью applyNext(), а затем его оборачивать. Полезные ссылки:

AndreyGladkov commented 9 years ago

applyNext() не получиться, в моей задаче не просто обернуть нужно, но и добавить внутрь контейнера еще блок, и после обертки блок футера.

{
   tag: '',
   content : this.ctx.scripts,
}

а вот эта конструкция помогла, не знал что так можно. Спасибо!

Guria commented 9 years ago

В this.ctx.scripts ожидается bemjson, а не url. Оставьте просто this.ctx.scripts, как это сделано в самом блоке page.

Guria commented 9 years ago

Попробуй ещё вариант:

block('page').mod('sticky-push', true)(

    content()(function(){
        return applyCtx([
            {
                block: 'page-sticky-footer',
                content: [
                    {
                        tag: '',
                        content: this.ctx.content
                    },
                    {
                        block: 'sticky-push'
                    }
                ]
            },
            {
                block: 'footer'
            }
        ])
    })
);

Кажется в этом случае скрипты тоже добавятся.

AndreyGladkov commented 9 years ago

Не нет скриптов уже пробовал

tadatuta commented 9 years ago

Я бы все-таки настоятельно порекомендовал использовать applyNext():

block('page').mod('sticky-push', true)(
    content()(function(){
        return [
            {
                block: 'page-sticky-footer',
                content: [
                    applyNext(),
                    {
                        block: 'sticky-push'
                    }
                ]
            },
            {
                block: 'footer'
            }
        ];
    })
);

А чтобы нормально сматчился шаблон на JS, достаточно явно указать блок в BEMJSON:

diff --git a/desktop.bundles/index/index.bemjson.js b/desktop.bundles/index/index.bemjson.js
index 64c6411..7ea3115 100644
--- a/desktop.bundles/index/index.bemjson.js
+++ b/desktop.bundles/index/index.bemjson.js
@@ -7,8 +7,8 @@
         { elem : 'meta', attrs : { name : 'viewport', content : 'width=device-width, initial-scale=1' } },
         { elem : 'css', url : '_index.css' }
     ],
-    scripts: [{ elem : 'js', url : '_index.js' }],
-    mods : { theme : 'islands' },
+    scripts: [{ block: 'page', elem : 'js', url : '_index.js' }],
+    mods : { theme : 'islands', 'sticky-push': true },
     content : [
         {
             block : 'header',