Блок не подключился внутри другого блока

Создал блок и перенес content в bemhtml блока из bemjson страницы и кнопка сразу перестала показываться. bemhtml блока:

block('login')(
    content()(function() {
        return [{
            block: 'button',
            mods: { theme: 'islands', size: 'l' },
            text: 'Войти'
        }];
    })
)

bemjson страницы:

content: [
  ...
  { block: 'login' }
  ...
]

Результат следующий:

<div class="button button_theme_islands button_size_l"></div>

Подскажите что не хватает и если есть возможность киньте ссылку в доке на решение.

9 years ago

apsavin

@antonowano вы объявляете блок login, а в bemjson блок search. Либо я не понял вопроса.

9 years ago

apsavin

Кстати, можно писать без []:

block('login')(
    content()(function() {
        return {
            block: 'button',
            mods: { theme: 'islands', size: 'l' },
            text: 'Войти'
        };
    })
)

9 years ago

antonowano

Это описка, в рабочем есть и login и search. хотел привести пример с search. я исправил в примере. Хотелось бы узнать причину почему не работает.

9 years ago

antonowano

Может дело в отсутствии mix?

9 years ago

tadatuta

@antonowano Предположу, что не описаны зависимости (см. https://ru.bem.info/tools/bem/bem-tools/depsjs/)

9 years ago

antonowano

Вот, кнопки появились, но пока что без стилей от islands

9 years ago

apsavin

@antonowano а уровни со стилями в сборку включены? в зависимостях к блоку login указана кнопка и соответствующие модификаторы?

9 years ago

antonowano

да, всё-таки дело в зависимостях. как несколько блоков включить в зависимость?

9 years ago

antonowano

Кстати, прописывая зависимость в одном блоке, она появляется и в другом.

9 years ago

apsavin

вот пример кучи всяких разных зависимостей

9 years ago

tadatuta

как несколько блоков включить в зависимость?

Передавать их в массиве:

shouldDeps: [
    'b1', 'b2', { block: 'b3', mods: { m1: ['val1', 'val2'] }, elems: ['e1', 'e2', { elem: 'e3', mods: { elemMod1: 'value1' } }] }
]

Читается как «блок зависит от блоков b1, b2, b3 с модификатором m1 со значениями val1 и val2, а также от элементов блока b3: b3__e1, b3__e2 и b3__e3_elemMod1_value1.

прописывая зависимость в одном блоке, она появляется и в другом

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

9 years ago

antonowano

чем mustDeps отличается от shouldDeps?

9 years ago

apsavin

По ссылке выше:

mustDeps (массив/объект) — определяются зависимости, гарантированно попадающие в результаты сборки до кода блока, в котором эти зависимости объявляются shouldDeps (массив/объект) — определяются зависимости, порядок подключения которых не важен

9 years ago

antonowano

Не совсем понял, когда мне это может пригодиться, но думаю по мере разработки на BEM - пойму. Всем спасибо за отвеченные вопросы.

9 years ago

qfox

На самом деле, все зависит от процесса сборки, и гарантия дается на то, что прописанные в must блоки будут раньше в списке на сборку для технологии (кода) сборки, а при should — порядок не важен, но важно наличие; правда, не думаю, что стоит в это закапываться в самом начале пути, но забывать не стоит, штука очень гибкая ;-). Но в общем случае — все так, как сказал @apsavin.

При использовании modules особый смысл теряется, конечно, потому что сам код modules подключается всегда первым и все остальное делается через него. А в случае, когда вам нужно при загрузке страницы выполнить синхронно какой-то код в определенном порядке — без must не обойтись. Ну и не стоит забывать про css, шаблоны: там порядок тоже важен, и deps работают и для них тоже.

9 years ago

antonowano

Теперь понял, спасибо.

Чтобы оставлять комментарии, необходимо авторизоваться.