@bradbenetton

есть два блока, первый из них через JavaScript влияет на другой.

Способов решения есть несколько. Предложу начать с теоретической части, а нижу отвечу про конкретные варианты в контексте i-bem: https://ru.bem.info/forum/issues/163/

У меня возник такой вопрос, почему же вообще существуют такие методы как findBlocksOutside, findBlocksInside, findBlocksOn, не противоречат они самой методологии, что блок должен знать где находится другой блок? Не проще ли иметь метод find, который просто находит необходимый блок в независимости от местаположения?

Как должно было стать понятно из поста «БЭМ — это не только про CSS», методология вполне допускает общение блоков друг с другом и предлагает ряд решений, чтобы реализация оказалась расширяемой и позволяла реиспользование кода.

Если рассматривать вариант с поиском другого блока в DOM-дереве, то по методологии блок может знать про примиксованные к нему блоки (findBlockOn) и своих детей (findBlockInside). Единственное исключение — это метод findBlockOutside, который на самом деле действительно противоречит методологии и его использование не рекомендуется.

Однако зачастую задачу взаимодействия с другими блоками можно решить без использования findBlock-методов. Например, с помощью событий или каналов (pub/sub):

modules.define('b1', ['i-bem__dom', 'b2'], function(provide, BEMDOM, B2) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                // подписываемся на БЭМ-событие click по любым блокам b2 внутри блока b1
                B2.on(this.domElem, 'click', function(e) {
                    e.target // ссылка на экземпляр `b2`, по которому кликнули
                });

                // подписываемся на изменение модификатора state любого блока b2 внутри или на элементе e1 блока b1
                B2.on(this.elem('e1'), { modName: 'state', modVal: '*' }, function(e) {
                    e.target // ссылка на экземпляр `b2`, у которого поменялся модификатор state
                });
            }
        }
    }
}));

});

modules.define('b1', ['i-bem__dom', 'events__channels'], function(provide, BEMDOM, channels) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                this.bindTo('click', function() {
                    // триггерим событие change в глобальный канал my-channel, при необходимости передавая туда произвольные данные { some: 'data' }
                    channels('my-channel').emit('change', { some: 'data' });
                });
            }
        }
    }
}));

});

modules.define('b2', ['i-bem__dom', 'events__channels'], function(provide, BEMDOM, channels) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                // подписываемся на канал
                channels('my-channel').on('change', function(e, data) {
                    console.log(data);
                });
            }
        }
    }
}));

});

Подробнее про методы events__channels см. https://ru.bem.info/libs/bem-core/v2.6.0/desktop/events/jsdoc/

Как же правильно решить задачу с меню, и как правильно применять методы findBlock*?

findBlockInside и findBlockOn в простом случае принимают имя блока в виде строки либо объект вида { block: 'b1', modName: 'm1', modVal: 'v1' } и возвращают первый найденный блок внутри себя или на собственном DOM-узле соответственно.

Кроме того, они позволяют передавать первый опциональный аргумент с именем элемента в виде строки или jQuery-коллекции, в рамках которого будет происходить поиск.

Сигнатура: findBlockInside([elem], block) → {BEMDOM} [elem] {String | jQuery} Элемент блока block {String | Object} Имя или объект с полями block, modName, modVal блока, который требуется найти

Как я уже писал, использовать findBlockOutside не рекомендуется, но логика его работы следующая: он находит блоки строго вверх по DOM-дереву. Т.е. чтобы «достучаться» до блока-сиблинга, потребуется сделать this.findBlockOutside('ближайший-общий-родитель').findBlockInside('целевой-блок').

Методы findBlocks* работают аналогично, но возвращают массив всех подходящих блоков, с которым дальше предполагается использование, например, forEach().

Можно ли найти примеры использования методов i-bem?

Предложу туториал и исходники в bem-components.

В документации при первой встречи метода setMod ничего не сказано про то, что же передается этому методу.

Чтобы понять, что каждый метод ожидает на вход, стоит смотреть в JSDoc. Например, для метода setMod там видно, что опциональный аргумент elem должен быть объектом.

лезешь в документацию, в документации ничего не написано.

Мы потихоньку работаем над улучшением документации, но, к сожалению, несколько ограничены в ресурсах :(

Всегда остается самый надежный способ — заглянуть в исходики:

• i-bem.vanilla.js
• i-bem__dom.js

Ну и на форуме всегда подскажут.

если есть методы findBlocks*, которые возвращают массив блоков, то почему нет метода, который возвращает массив элементов?

Дело в том, что методы elem() и findElem() возвращают jQuery-коллекцию, т.е. по смыслу как раз всегда массив. И работать с элементами нужно именно как с jQuery-коллекциями: this.elem('e1').hide();. Другое дело, что чаще всего вместо этого подойдет this.setMod(this.elem('e1'), 'hidden') + в CSS .b1__e1_hidden { display: none }.

Я подобное меню с кнопкой считаю одним блоком, а не двумя независимыми. Свою реализацию сделал именно как один блок на нескольких элементах

@Guria Я обращал внимание на этот способ, но на самом деле не понял как же его реализовать. Грубо говоря в BEMJSON нужно объявить два одинаковых блока и присвоить им в js одинаковые id, верно?

Да, верно. Будут трудности - спрашивай.