Можно ли с помощью i-bem.js проверять email с помощью регулярных выражений или обязательно нужно подключать jQuery? Например, так будет работать бeз jquery
if (/\S+@\S+\.\S+/.test(this.elem('email').val())) return true;
Пример:
<div class="loader"></div>
Допустим, в нашей верстке есть блок loader, задача которого сводится к уведомлению клиента о том, что после того, как он произвел действие система формирует для него ответ. Данный блок представляет из себя тонкую горизонтальную плашку шириной во всё страницу в верхней части сайта, которая мерцает, изменяя свой цвет с насыщенного синего до бледно-голубого до тех пор пока данные не сформируются. После того, как мы получили данные, блок loader исчезает.
<form class="search-form">
<input class class="search-form__input" >
</form>
После того как ввели текст и нажали ENTER система крутит наш loader пока не придут данные.
Также в системе существуют другие элементы управления, как например категории, табы и т.п., которые также умеют запускать и останавливать loader.
У меня возник вопрос, можно ли написать эти блоки таким образом, чтобы не зависимо от того, есть в нашей системе loader или нет мы всегда имели АНБ, и имели возможность использовать функционал loader'а. Придется ли нам внедрять loader в каждый блок или есть более изящное решение? Будут ли в таком случае блоки абсолютно независимыми? Возможно нужно смотреть в сторону событий?
п.с сорри за опечатки не попадаю в клавиатуру на планшете своими сосисками, исправлю за компом
Возможно ли использовать AngularJS совместно с i-bem? Или в этом нет никакого смысла.
Если сделать BEMDOM.destruct(this.elem('some-elem')), то элемент всё равно остаётся в кеше. Не могу понять, баг это или фича.
А есть ли к методу BEMDOM.init обратный? Чтобы рекурсивно в DOM дереве занулить модификаторы js
Возможно ли обычное наследование (через baseBlock) от нескольких блоков? Похоже нет, но может есть workaround?
Что будет, если блоку унаследованному от базового, указать свой baseBlock в модификаторе? Например:
{block: 'link', baseBlock: 'control'},
{block: 'link', modName: 'overrided', modVal: 'custom', baseBlock: 'another-base-block'}
Подскажите, на что будет указывать this.prototype в статических методах блока? Заинтересовала такая конструкция:
live : function() {
this.liveBindTo('control', 'pointerclick', this.prototype._onPointerClick);
return this.__base.apply(this, arguments);
}
upd: Да, главное то не спросил! будет ли работать такая конструкция:
someStaticMethod: function(){
somePromise.then(
this.prototype.blockMethod,
this
);
}
У объекта event, который приезжает в обработчик БЭМ-события первым элементом, есть методы preventDefault() и stopPropagation(), но если вызвать e.stopPropagation() в обработчике на вложенном блоке, то событие всё равно всплывает в родительский.
Сейчас проверяю в обработчике в родительском блоке
someEvenHandler(e, data) {
if (! e.isPropagationStopped()) {
this.doSomething();
}
}
Но насколько это всё правильно?
Здравствуйте!
Возможно ли изменение параметров блока в js-реализации другого?
К примеру, есть блок list с элементами item. У каждого элемента есть параметры id и name.
{
block : 'list',
elem : 'item',
content : name,
js : {
id : id,
name : name,
}
}```
При клике на `item` я подгружаю соответствующий контент в основной блок на странице.
Меняю там название `name`, сохраняю на сервере, так же хотелось бы обновить элемент списка `list`.
Как мне найти нужный элемент списка, как изменить его параметры?
Есть ли возможность клонировать блок? Аналог jQuery.clone() для блока.
В приложении типа чат есть два списка: список общих комнат и список приватных бесед.
Реализовал их блоком list с соответствующим модификатором type.
Задача: реализовать выбор одного элемента из списка.
Проблема: каждый инстанс блока list запоминает свой активный элемент списка.
// При клике на элемент списка ставлю соответствующий модификатор
_onItemClick : function (e) {
var item = $(e.currentTarget);
var type = this.getMod(item, 'type');
this.setMod(item, 'current', true);
}
// При выставлении модификатора новому элементу, удаляю модификатор у предыдущего
onElemSetMod : {
'item' : {
'current' : {
'true' : function (elem) {
this.delMod(this._current, 'current');
this._current = elem;
}
}
}
}
Как грамотнее всего реализовать, чтобы при выборе одного элемента удалялся модификатор не только в текущем инстансе блока, а во всех списках?
Так же интересует насколько правильной является реализация "оборачивания" всех элементов списка в контейнер с помощью создания нового элемента container
// BEMJSON
{
block: 'list',
mods: { 'type' : 'channels' },
content: [
{ elem: 'title', content: 'Каналы' },
{ elem: 'container' }
]
}
// BEMHTML
block('list').elem('container').tag()('ul');
// JS-реализация загрузки данных в список
_getListData : function (type) {
var container = this.elem('container');
API.get('channels.list', { type: type }).then(function (data) {
var channels = data.channels;
channels.forEach(function (channel) {
BEMDOM.append(container,
BEMHTML.apply({
block : 'list',
elem : 'item',
mods : { type : type },
content : channel.name,
js : {
id : channel.id,
name : channel.name
}
})
);
});
});
}
Спасибо!
Есть в bem-components модальное окно https://ru.bem.info/libs/bem-components/v2.3.0/touch/modal/examples/ Каким образом можно создать его налету и запихнуть скажем контент из скрытого дива?
Задача такая, кликнул человек по кнопке редактировать и рядом стоящий div меняется на input
Друзья, возник вот такой вопрос. Как при возникновении события добраться до стилей блока, на котором это событие возникло, и изменить какой-нибудь отдельный параметр.
Задача - хочу сделать DIV с горизонтальной прокруткой по скроллингу мыши. Для галереи картинок. Я сделал блок с overflow: hidden. В него вложил длинный блок из картинок. Теперь хочу по событию scroll менять параметр left для блока с картинками. Подписка на события вроде понятна, но в описании библиотеки jquery в bem-core события scroll нет. Чую, что в BEM есть нюансы в реализации такой функциональности.
В общем, подскажите пожалуйста, в какую сторону копать )
Господа, ещё давно возник такой вопрос. Как я понял оно не происходит, и единственный путь - это прокидывание события через всю цепочку блоков. Если ошибаюсь - прошу руку помощи.
Нашел как в i-bem подключать jquery плагины, да и вообще весь браузерный код, и прокидывать зависимости https://github.com/bem/bem-forum-content-ru/issues/426
Но так и не разобрался, каким образом подключать код, у которого нет браузерной обёртки, например: https://github.com/dfilatov/bem-react
Руками запускать browserify, ложить получившийся js-бандл в блок, и подключать его по первому способу борщиком?
Есть блок post, у него есть элемент <span class="post__action post__create" data-bem='{"post__create": {"url": "/post/create"} }'>Создать</span>.
На post__create навешен обработчик клика. Примерно такой:
_sendCreateRequest: function(e) {
var $target = $(e.target),
params = this.elemParams($target);
$.get(params.url)
.done(function() {});
}
И вот будет этот обработчик работать правильно или нет — зависит от порядка, в котором обявлены элементы на дом-ноде. <span class="post__action post__create"> — не работает, <span class="post__create post__action"> — работает.
И вот вопрос — это косяк в логике блока и так делать ообще не нужно никогда, или всё-таки баг в this.elemParams() и его стоит зарепортить?
Всем привет. Есть ли возможность указать ym что модуль находится во внешнем файле, так чтобы тот его загрузил?
Есть ли какие либо методы для работы с промисами в i-bem.js? Собственно у меня AJAX запрос получаем данные с сервера(для этого у блока метод getBlabla). Он вызывается при изменении контролов, так вот есть ли какая либо реализация промисов, что бы повеситься на событие исполнения метода getBlabla? У меня только идея работая с модификаторами, при успешном выполнении AJAX вешаем какой нибудь модификатор upload и на событие изменения модификатора выполняем нужный код, может есть более изящное решение?
Всем привет. Помогите разобраться. Вешаю модификатор на блок при скролле следующим способом:
modules.define('counter', ['i-bem__dom', 'jquery'], function (provide, BEMDOM, $) {
provide(BEMDOM.decl(this.name, {
onSetMod: {
js: {
inited: function () {
this.bindToWin('scroll', function(e) {
// устанавливаем модификатор
});
}
}
}
}))
});
Вопросы:
- Как модифицировать и сделать так, чтобы установка модификатора происходила при прокрутке страницы на 500 пикселей, например.
- При прокрутке страницы до определенного блока, например, block "b2"
Пробовал так:
var scroll = $(this).scrollTop();
if (scroll >= 500) {
// вешаем модификатор
};
Не получилось
Всем привет!
Хочу нести в массы БЭМ методологию и только bem-core в качестве front-end фреймворка (в основном из-за i-bem). Отсюда вопросы: 1) Есть ли готовые сборки bem-core? Если нет, думаю, собрать bem-core в один JS файлик и распространять как bower-пакетик, периодически синкая с bem-core. 2) Также хочу заменить ymodules на AMD, т.к. ни один пакетный менеджер не имеет поддержки ymodules. Думаю использовать webpack, у него тоже есть поддержка асинхронного инита. Может уже есть такое? 3) Есть ли примеры использования i-bem без enb и вот этого всего? Если нет — буду писать.)
Так получилось, что блок изначально есть на странице, но внутри элемента с display: none. И если блок в этот момент проинициализируется, то он неправильно всё посчитает.
Я решил сделать так:
{
beforeSetMod: {
js: {
inited: function() {
if (this.domElem.is(':hidden')) {
return false;
}
}
}
},
}
а когда внешний элемент меняет свою видимость, то делаю
BEMDOM.init($elem);
Однако ничего не работает ;) Вложенный блок считает, что его уже пытались проинициализировать и не хочет инициализироваться повторно.
Возможно я что-то делаю совсем не так и проблему нужно решать по другому?
Всем доброе утро!
Есть примерно следующая ситуация.
- Существует меню.
{
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?
Всем привет! Начал разбираться с i-bem.js и возникли некоторые вопросы. В качестве тестового примера взял статью на вашем форуме https://ru.bem.info/tutorials/quick-start-static/
Создал блок с произвольным названием taskmanager, здесь код BEMJSON-блока taskmanager https://github.com/Sergei-b84/test/blob/master/1.bemjson Динамическую функциональность данного блока описал в taskmanager.js файле https://github.com/Sergei-b84/test/blob/master/taskmanager.js Файловое размещение стандартное, поэтому описывать его не стал. В общем все отработало хорошо.
Теперь я хочу усложнить структуру моего блока taskmanager и сделать ее такой https://github.com/Sergei-b84/test/blob/master/2.bemjson А вот как переписать мой taskmanager.js файл не знаю. Помогите пожалуйста. Как искать элементы, если появились вложенные дополнительные блоки, как описать эти блоки? Жду ответа. Спасибо.
Есть примерно такая структура:
<div class='block'>
<div class='block__elem block__elem_active'>Элемент 1</div>
<div class='block__elem'>Элемент 2</div>
</div>
Когда я пытаюсь искать элемент при помощи this.findElem('elem', 'active'), то получаю пустой результат. Если делаю this.elem('elem', 'active');, или this.findElem('elem', 'active', true); то получаю нужны элемент.
Как я понимаю, это происходит из-за того, что _self.buildClass() в https://github.com/bem/bem-core/blob/v2.6.0/common.blocks/i-bem/__dom/i-bem__dom.js#L742 возвращает block_elem_active вместо block__elem_active.
Есть блок который содержит контролы у контролов свой js. Каким образом можно отловить изменение конкретного контрола в другом блоке(я без проблем повешу модификатор если контрол изменился), но уровень абстракции должен быть таким, что конкретный контрол не знает, что он меняет. Своего рода события как в jquery. Собственно как отловить это событие?
Хочется делать определённые действия с элементом, на котором нет модификатора. Как бы мне его выбрать? this.elem('elemName', 'modName', false) не даёт нужного результата.
Хочу сделать следующую штуку. Блок без модификатора - ленивая инициализация Блок с модификатором - автоматическая
Возможен ли такой вариант?
Такой вопрос когда я вещаю обработчик на элемент блока
this.bindTo(this.elem('btn'), 'click', function(e){
this.delMod(this.elem('btn'), 'selected');
this.itemOnclick(e);
});
Как получить объект элемента в рамках БЭМа? У меня пока только один вариант получения самой ноды через e.target, но это не то что нужно.
Всем привет!
Правильно ли я объявляю блок-микс в js? Он у меня почему-то выпадает в ошибку: Uncaught mix block "mix" for "block" is undefined.
BEMJSON:
{
block: 'block',
js: true,
mix: [{block: 'mix'}],
content: 'Block'
}
js:
modules.define('block', ['i-bem__dom'], function(provide, BEMDOM) {
provide(BEMDOM.decl({ block: this.name, baseMix: ['mix'] }, {
onSetMod: {
'js': {
'inited': function() {
console.log('Block!')
}
}
}
}));
});