Это концепт инструмента для i-bem. Не готов к реальному применению.
Продолжение разработки не имеет особого смысла без принятия bem/bem-core#1571
Набор методов для экземпляров BemDomEntity для поиска блоков и элементов в DOM дереве:
.queryChild.queryChilds.queryParent.queryParents.queryMix.queryMixes
Примеры синтаксиса:
| Описание | классический синтаксис | bem-dom-queries |
|---|---|---|
Дочерний элемент el |
this.findChildElem('el');
|
this.queryChild('el');
|
Родительский блок Form |
this.findParentBlock(Form); |
this.queryParent(Form); |
Блок Form на той же DOM-node |
this.findMixedBlock(Form); |
this.queryMix(Form); |
Дочерний элемент el с модификатором mod1 в значении val1 |
this.findChildElem({
elem: 'el',
modName: 'mod1',
modVal: 'val1'
});
|
this.queryChild({
elem: 'el',
mods: {mod1: 'val1'}
});
|
Дочерний элемент el без модификатора mod1 |
this.findChildElems('el').find(function (el) {
return !el.hasMod('mod1');
});
|
this.queryChild({
elem: 'el',
mods: {mod1: ''}
}); или
this.queryChild({
elem: 'el',
mods: {mod1: false}
});
|
Дочерний элемент el с модификатором mod1 в любом значении |
this.findChildElems('el').find(function (el) {
return el.hasMod('mod1');
});
|
this.queryChild({
elem: 'el',
mods: {mod1: '*'}
});
|
Дочерние элементы el с модификатором mod1 в значении val1 либо в значении val2 |
this.findChildElems('el').filter(function (el) {
return el.getMod('mod1') === 'val1' ||
el.getMod('mod1') === 'val2';
});
|
this.queryChilds({
elem: 'el',
mods: {
mod1: ['val1', 'val2']
}
});
|
Дочерний элемент el с модификатором mod1 в значении val1 либо в значении val2, с модификатором mod2 в значении true, с модификатором mod3 в любом значении и без модификатора mod4 |
this.findChildElems({
elem: 'el',
modName: 'mod2',
modVal: true
}).find(function (el) {
return (el.getMod('mod1') === 'val1' ||
el.getMod('mod1') === 'mod2') &&
el.hasMod('mod3') &&
!el.hasMod('mod4');
});
|
this.queryChild({
elem: 'el',
mods: {
mod1: ['val1', 'val2'],
mod2: true,
mod3: '*',
mod4: false
}
});
|
Дочерний блок Button, находящийся на одной DOM-ноде с элементом control текущего блока |
this.findChildElem('control')
.findMixedBlock(Button);
|
this.queryChild({
block: Button,
mix: {elem: 'control'}
});
|
Дочерние элементы control текущего блока с модификатором type в значении button, находящийся на одной DOM-node с блоком Button без модификатора disabled и с блоком Widget |
this.findChildElems({
elem: 'control',
modName: 'type',
modVal: 'button'
}).filter(function (controlEl) {
return !controlEl.findMixedBlock(Button) ||
controlEl.findMixedBlock(Button)
.hasMod('disabled') ||
controlEl.findMixedBlock(Widget)
})
|
this.queryChilds({
elem: 'control',
mods: {type: 'button'},
mix: [
{
block: Button,
mods: {
disabled: false
},
},
Widget
]
});
|
Примеры довольно синтетические, но из видно, что bem-dom-queries позволяет выражать даже довольно сложные запросы к DOM в простой и наглядной декларативной форме.