У меня есть некий блок с Голосованием (.vote). В нем есть две кнопки "За" и "Против" (button.voteaction). Так же у меня есть блок Кнопка (.btn). Кнопки "За"/"Против" должны быть блоками Кнопка (button.voteaction.btn) - т.е. микс получился. При клике на кнопки "За" или "Против" я хочу, что бы они выделялась цветом, например зеленым. Для этого у блока Кнопка есть модификатор green (.btn_theme_green) Т.е. при клике на voteaction с помощью JS я добавляю ей модификатор voteaction_active, но при это я должен добавить и класс btn_theme_green. Использовать в JS классы btn и btn_theme_green не хочется ибо кнопки могут быть заменены на другие (например, .btn34).

Скажите как правильно огранизовать взаимодействие этих двух блоков в JS?

Есть БЭМ блок, у которого прописаны свои поведения. Изначально его на странице нет. но в deps он прописан поэтому все исходники подгружаются. Так вот. Надо чтобы по событию нажатия кнопки, в DOM добавлялся этот блок. Таких блоков может быть добавлено много. Необходимо чтобы он при всем при том еще и работал. Каким образом это сделать?

Привет. Наткнулся на такую проблему. Когда делаю попап

 {
                block : 'popup',
                mods : { autoclosable : true },
               ...
}

Внутри которого есть блок select который в свою очередь использует блок popup, то по клику (выбору их селекта) попап родитель скрывается.

Подскажите как лечить? Знаю про то что блок popup будет переделан, понимаю что скорее всего не подразумевалось что попап может быть в попапе с поведением автоскрытия, но интересны варианты решения.

Интересна реализация похожая на реализацию подключания jquery. Сам пробовал сделать на подобии, но ничего не вышло. Прошу помощи

Решил я попробовать обернуть сторонний виджет в блок БЭМ, возьмем например Yandex Share

<script type="text/javascript" src="//yandex.st/share/share.js" 
    charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" 
    data-yashareQuickServices="vkontakte,facebook" data-yashareTheme="counter"></div>

Я создаю блок bem create -l desktop.blocks -b yashare с содержимым

# desktop.blocks/yashare/yashare.bemhtml
`block('yashare')(
    tag()('div'),
    bem()(false),
    cls()('yashare-auto-init'),
    attrs()({'data-yashareQuickServices': '...', 'data-yashareTheme': '...')
)

/* desktop.blocks/yashare/yashare.browser.js */
modules.define('yashare', ['loader_type_js'], function(provide, loader) {
    loader('//yandex.st/share/share.js', provide);
});

А теперь вопрос, как воспользоваться данным блоком, чтоб подключения share.js было единожды (это уже реализует loader), но только в случае наличия на странице блоков yashare?

Если в yashare.browser.js добавить modules.require(['yashare'], function() {}); то подключение скрипта будет вне зависимости от наличия на странице блоков.

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

P.S. Из-за плохой, не структурированной, а местами просто устаревшей документации - очень высокий порог вхождения...

Что делаю не правильно?

modules.define('navigation', ['i-bem__dom'], function (provide, BEMDOM)
{
  provide(BEMDOM.decl({block: this.name}, {
    onSetMod: {
      'js': function ()
      {
        console.log("navigation активен")
      }
    }

  }, {
    live: function ()
    {
      this
        .liveBindTo('click', function ()
        {
          var wrapper = this.findBlockOutside({ blockName : 'wrapper'});
          if (this.hasMod("open")) {
            this.delMod("open");
            wrapper.delMod("compress");
          } else {
            this.setMod("open", "true");
            wrapper.setMod("compress", "true");
          }

        });

    }
  }));

});

modules.define('wrapper', ['i-bem__dom'], function (provide, BEMDOM)
{
  provide(BEMDOM.decl({block: this.name}, {
    onSetMod: {
      'js': function ()
      {
        console.log("wrapper активен")
      }
    }
  }, {
    live: false
  }));

});

this.findBlockOutside({blockName: 'wrapper'}) возвращает null

Возможно я это упустил из док. Ткните мне как правильно в browser.js делается поиск блоков рядом? Или как это делаете вы?

Сейчас я делаю что-то типа:

this._bla = this.findBlockOutside('category').findBlockInside('control-group');

До сих пор не могу понять магию apply, applyNext, applyCtx хотя ни раз читал ман по ним

Вообще мне нужно изменить элемент на ссылку, если в параметрах есть url, я сделал так

block('nav').elem('item')
(
    match(this.ctx.url)
    (
        function()
        {
            this.ctx.block = 'link';

            delete this.ctx.elem;

            this.ctx.mix   = [
                {
                    block: this.block,
                    elem: 'item'
                }
            ];

            applyCtx(this.ctx);
        }
    )
);

Получаю бесконечную рекурсию - [RangeError: Maximum call stack size exceeded]

Сейчас я поставил такой костыль:

block('nav').elem('item')
(
    match(this.ctx.url && !this.ctx._prepared)
    (
        function()
        {
            this.ctx.block     = 'link';
            this.ctx._prepared = true;

            delete this.ctx.elem;

            this.ctx.mix   = [
                {
                    block: this.block,
                    elem: 'item'
                }
            ];

            applyCtx(this.ctx);
        }
    )
);

Как сделать правильно?