Всем доброе утро!
Есть примерно следующая ситуация.
- Существует меню.
{
block: 'navigation',
content:[
{
elem: 'item',
content: {
block: 'link',
url :'http://first-menu-link.com',
content: 'Home',
mix: {block: 'navigation', elem: 'link'}
}
},
{
elem: 'item',
content: {
block: 'link',
url :'http://second-menu-link.com',
content: 'Diensleitstungen',
mix: {block: 'navigation', elem: 'link'}
}
}
]
}
- У некоторых элементов меню может быть второй уровень. Что бы понять к какому элементу первого уровня относиться второй уровень, введена переменная connectTo, значение которой будет равно элементу поля content из первого уровня.
{
block: 'navigation-level-2',
js: { connectTo: 'Diensleitstungen' },
content: {...}
}
- При клике на любой из элементов меню 1-го уровня, создается кастомное событие showSubLevel с названием элемента меню, по которому был клик.
modules.define('navigation', ['i-bem__dom', 'jquery' ], function(provide, BEMDOM, $ ){
provide(BEMDOM.decl(this.name,
{
onSetMod: {
'js': {
'inited' : function() {
this.bindTo('link', 'click', function(e) {
this.emit('showSubLevel', $(e.target).text());
});
}
}
}
}
));
});
- Меню второго уровня подписано на события showSubLevel
modules.define('navigation-level-2', ['i-bem__dom','jquery','navigation'], function(provide, BEMDOM, $, nav){
provide(BEMDOM.decl(this.name,
{
onSetMod: {
'js': {
'inited' : function() {
nav.on('showSubLevel', function(e, title) {
// Here I need a loop that iterates through all the 'navigation-level-2' blocks
if (this.params.connectTo === title) {
// Show sub navigation
}
// Loop ending
});
}
}
}
}
));
});
Подскажите, как можно создать цикл, который пройдет по всем блокам, которые есть на странице и проверит у каждого свойство .params.connectTo?
@Lacr1ma А точно необходимо решать задачу именно так?
Я бы предложил вариант, когда клик по элементу первого уровня выставляет ему модификатор (а с сиблингов — сбрасывает). Тогда подменю можно было бы показывать просто за счет вложенного селектора в CSS (
.navigation__item_current .navigation-level-2 { display: block; }
).Если же есть необходимость явно находить вложенные меню, то делать что-то типа
this.findBlockInside('navigation-level-2').setMod('visible', true)
.Я согласен с данным решением, но оно, как по мне, больше подходит если наше меню 2-го уровня находиться внутри первого, т.е. если мы имеем что-то типа:
А что, если меню второго уровня должно находиться вне .navigation__item . Простым языком, я имею ввиду примерно следующую структуру:
P.S: не знаю как "заатачить" картинку, поэтому даю линк на пример меню, которое я хотел бы реализовать на БЭМ.
Судя по описанию, речь про компонент, который принято называть табами?
Предлагаю взглянуть на блок tabs.
Если не подойдет, отвечу на исходный вопрос.