Телеграмм чат группы bem

Итак, предположим, у тебя есть некая кнопка, клик по которой ты хочешь обрабатывать. Это может быть кнопка с каким-то уникальным модификатором, например button_super-action…

источник

15:06пожаловаться #5

Роман in БЭМ

А, ну или блок. Если ты сам создал этот блок (а не переиспользуешь его из набора, например, bem-core или bem-components), то всё ещё чуть проще…

источник

15:07пожаловаться #6

ЕЕ

Евгений Евгений in БЭМ

Роман

сам создал блок,внутри него необходимо указать
mods: {type: 'button'}?Ну если это кнопка)

источник

15:08пожаловаться #7

Роман in БЭМ

Допустим, это блок my-block. В директории уровня переопределения у тебя, значит, есть каталог с таким же именем:

./
  common.blocks/
    my-block/

источник

15:09пожаловаться #8

ЕЕ

Евгений Евгений in БЭМ

все верно есть

источник

15:09пожаловаться #9

Роман in БЭМ

И там шаблон (my-block.bemtree.js, my-block.bemhtml.js), стили (my-block.css) и нужен теперь файл с клиентским JS: my-block.js

источник

15:10пожаловаться #10

15:11пожаловаться #11

Роман in БЭМ

Это и декларация, и сразу инициализация.

источник

15:12пожаловаться #12

Ильдар in БЭМ

Запилите уже песочницу

источник

15:14пожаловаться #13

Роман in БЭМ

Там есть фрагмент:

onSetMod: {
  js: {
    inited: function() {
      /* … */ 
    }
  }
}

Который можно «прочитать» как


При установка модификатора: {
  js: {
    в значении «inited» выполни следующий код {
      /* … */ 
    }
  }
}

источник

15:14пожаловаться #14

Ильдар in БЭМ

Не забываем что у блока должно быть js:true

источник

15:15пожаловаться #15

Роман in БЭМ

Для блоков моддификатор *_js_inited выставляется автоматически, если подключен i-bem.js и у блока в шаблоне прописано

// bemjson
{
  block: 'my-block',
  js: true
}

или

// bemhtml/bemtree
block('my-block').addJs()(true)

источник

15:16пожаловаться #16

Роман in БЭМ

^^^ это а-ля автоматическая инициализация (есть ещё ленивая, она позволяет оптимизировать ОЫ-ресурсы, которые нужно инициализировать не при загрузке страницы, а отложенно)

источник

15:18пожаловаться #17

Роман in БЭМ

т. е., если мы добавляем блоку js: true, то у него при рендере появится ещё один css-класс: i-bem.

источник

15:19пожаловаться #18

Роман in БЭМ

Этот класс срабатывает на DOMReady и активирует все неленивые блоки/элементы — им автоматически добавляется класс *_js_inited, для которого мы и написали (пока ещё не написали) код в onSetMod: { js: { inited: () } }

источник

15:21пожаловаться #19

Роман in БЭМ

Роман

Т. е. если мы добавим туда console.log(), то он сработает тогда, когда все зависимые файлы будут загружены и готовы.

источник

15:22пожаловаться #20