Адепты bem-components, подскажите, пожалуйста: в попап select'а поместил ещё input (для поиска по элементам menu). Что нужно переопределить, чтобы весь функционал сохранился, кроме закрытия попапа по клику на этот input?
P.S. Нутром чую, что дело в _onDocPointerPress и _isEventInPopup.
https://github.com/bem/bem-components/blob/v6.0.0/common.blocks/select/select.js#L247-L268
Добрый день!
Заметил следующее поведение bem-components на TOUCH-PAD и TOUCH-PHONE-устройствах: блоки (select, button, radio-group и т.д) срабатывают только при повторном нажатии (tap). После первичной инициализации конкретного блока проблема исчезает, срабатывает сразу. Подобное поведение наблюдалось на планшете iPad и двух Android-телефонах. Заметил сначала в проекте, потом проверил тут: bem-components / 6.0.0, описанное поведение воспроизвелось.
Подскажите, пожалуйста как побороть. Не хотелось бы отказываться от ленивой инициализации.
Имеется select с количеством пунктов ~ 100 и при указании optionsMaxHeight он прекрасно работает до тех пор, пока не зайти с телефона.
С телефона select продолжает раскрываться во всю высоту, что очень уж неудобно. Причем если в моб.браузере поставить настройку "Полная версия сайта", то select начинает работать правильно.
В чем может быть проблема?
Всем доброго времени суток. Появилась необходимость доопределить js для блока Attach. А именно, при выборе картинки рисовать preview аватара. Код:
/* desktop.blocks/attach/attach.js */
modules.define('attach', function(provide, Attach) {
provide(Attach.decl({ modName: 'type', modVal: 'avatar' }, {
onSetMod: {
'js': {
'inited': function() {
this.__base.apply(this, arguments);
console.log('attach_type_avatar inited...');
}
}
},
_updateFileElem: function() {
this.__base.apply(this, arguments);
console.log('_updateFileElem');
//Do something...
},
_clear: function() {
this.__base.apply(this, arguments);
console.log('_clear');
//Do something...
}
}));
});
Методы срабатывают, "Супер-колл" работает, Функциональность блока не ломается, только после выбора файла, всплывает ошибка:
Uncaught TypeError: Cannot read property '_emitChange' of undefined
at Object._onChange (profile_settings.min.js:7695)
at n.fn.init.
Конкретно в этом месте:
_onChange : function() {
this.elem('no-file').detach();
this.getVal()?
this
._updateFileElem()
._emitChange() :
this._clear();
}
Как побороть ошибку? Доопределяю кнопки таким же образом - нет никаких ошибок.
Всем привет!
Пытаюсь написать примитивный тест на встраивание компонента. Использую Jest. Выглядит он примерно так:
import React from 'react';
import ReactDOM from 'react-dom';
import Button from 'b:Button';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<Button />, div);
});
Файл .babelrc
{
"presets": [
["es2015"],
"stage-1",
"react"
],
"env": {
"test": {
"plugins": [
["bem-import", {
"techs": ["js"]
}]
]
}
}
}
Файл .bemrc
module.exports = {
root: true,
levels: {
'blocks': {
scheme: 'nested',
shemeOptions: 'react',
naming: 'react'
},
'node_modules/@myBem/typography/blocks': {
scheme: 'nested',
shemeOptions: 'react',
naming: 'react'
},
'node_modules/@myBem/icons/blocks': {
scheme: 'nested',
shemeOptions: 'react',
naming: 'react'
}
}
}
Запуская тест командой npm test я получаю ошибку
FAIL blocks/Button/Button.test.js
● Test suite failed to run
Cannot find module 'm:paragraph' from 'Text.js'
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
at Object.<anonymous> (node_modules/@myBem/typography/blocks/Text/Text.js:4:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.129s, estimated 3s
Дело в том что блок Button внутри себя делает import другого блока Text из node_modules/@myBem, который в свою очередь делает import модификатора paragraph. И вот тут у меня ощущение что модуль bem-import не заходит так глубого во вложенности блоков. Что мне делать в данном случае или может можно как-то по другому решить проблему? Ударяюсь лбом о стену уже второй день =(
Спасибо!
Добрый день. Нужна оценка корректности БЭМ нейминга на данной странице: http://portfoliome.ru/demo/portland/ Верное ли наименование классов, использование миксов и тд?
Код бандла index.bemjson.js выглядит следующим образом:
index.bemjson.js
module.exports = {
block: 'page',
title: 'Title of the page',
favicon: '/favicon.ico',
head: [
{ elem: 'meta', attrs: { name: 'description', content: '' } },
{ elem: 'meta', attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' } },
{ elem: 'css', url: 'index.min.css' }
],
scripts: [{ elem: 'js', url: 'index.min.js' }],
mods: { theme: 'islands' },
content: [
{
block: 'header',
}
]
};
В блоке header, в файле header.deps.js я устанавливаю зависимость вида:
({
shouldDeps: [
{
block: 'logo',
mods: {theme: 'sea'}
}
]
})
Соответственно блок лого существует, и у него прописаны стили.
Но при сборке проекта блок header не содержит никакой вложенности.
Соответственно вопрос: как добавить вложенность?
Или это так не должно работать, и в любом случае в index.bemjson.js должен быть явно прописан блок внутри блока?
Необходимо назначить модификатор блоку menu, вложенному select (нужен код на экземпляре блока, связанный с модификатором). Пробую так:
block('select').mod('nicescroll', true)(
block('menu')(
addMods()(function(){
return {
nicescroll : true,
};
})
),
// ...
Эффект нулевой.
Как?????????????
UPD: Ага. В bem-components так:
block('select').elem('menu')(
replace()(function() {
// ...
Т.е., наверное, могу ловить elem('menu') как-то. Щас попробую.
UPD-UPD: Ничего не придумал, кроме:
block('select').mod('nicescroll', true).elem('menu').replace()(function(){
var ctx = applyNext();
ctx = ctx.replace(/\b(class="menu)\b/, '$1 menu_nicescroll');
return ctx;
}),
Но ведь это же неправильно!!!
Нет возможности перехватывать определение block('select').mod('nicescroll', true).block('menu') до рендеринга?
Добрый день!
Каскадные select'ы встречаются довольно часто в разных формах. Законченного решения мне найти не удалось, ни на форуме ни в документации. Помогите, пожалуйста разобраться на конкретном примере. Как реализовать каскадные блоки select в технологии js по следующему сценарию:
Допустим, мы имеем 3 select-блока с модификатором disabled (до инициализации), например: country, city, street.
После автоматической (domReady) инициализации, первый select-блок (country) выполняет обращение к API, получает данные в json-формате, заполняется пунктами, на основании полученного массива данных и в случае успеха, с первого блока снимается модификатор disabled.
Выбираем пункт country, получаем значение выбранного пункта, формируем запрос к API, получаем ответ, заполняем пункты второго блока (city), снимаем модификатор disabled со второго блока.
Выбираем пункт city, получаем значение выбранного пункта, формируем запрос к API, получаем ответ, заполняем пункты третьего блока (street), снимаем модификатор disabled со третьего блока.
При изменении значения, для нижестоящих по иерархии (country - city - street) блоков, процедура повторяется.
Заранее спасибо!
Доброго времени суток!
Наткнулся на очень странное поведение блока select с модификатором radio-check. Берем bemjson из документации:
{
block : 'select',
mods : { mode : 'radio-check', theme : 'islands', size : 'm' },
name : 'select3',
val : 2,
text : '—',
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}
несколько раз клацаем, меняем выбранное значение - все прекрасно. Но так как далеко не всегда существует значение по-умолчанию, убираем val:
{
block : 'select',
mods : { mode : 'radio-check', theme : 'islands', size : 'm' },
name : 'select3',
text : '—',
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}
и повторяем манипуляции. Вот тут и начинаются странности: проклацав по-очереди все пункты получаю примерно такую разметку:
...
<div class="select select_mode_radio-check select_theme_islands select_size_m i-bem select_js_inited" data-bem="{"select":{"name":"select3","text":"—"}}">
<input type="hidden" name="select3" class="select__control" value="3">
<input type="hidden" name="select3" class="select__control" value="2">
<input type="hidden" name="select3" class="select__control" value="1">
<button class="button button_size_m button_theme_islands select__button button__control i-bem button_js_inited button__control_js_inited _popup-destructor_js_inited button_checked" data-bem="{"button":{}}" role="listbox" aria-owns="uniq14993408571141 uniq14993408571142 uniq14993408571143" aria-labelledby="uniq14993408571144" type="button">
<span class="button__text i-bem button__text_js_inited" id="uniq14993408571144">Круглый стол</span>
<span class="icon select__tick"></span>
</button>
</div>
...
Версия bem-components 6.0.0
Начал перетаскивать проект на новые версии bem-components, bem-core. После банальных переименований методов упёрся в непонятное:
Что использовать вместо:
elem = block.elemify(domNode, 'elem')block = domNode.bem('block')(Также предстоит ещё разбираться с кучей мест, где используется старый menu-item вместо menu__item. Наверное, что-то ещё вылезет; приду сюда плакать обратно.)
Есть такой блок: https://monosnap.com/file/pGc1WTU62lxQLYMh65Nb7peD9zaLJJ
Правильно ли я его разметил по БЭМ?
.news
.news__head
.section__title.news__title
.news__content
.news__column-left
.news__img-big-wrap
.news__sub-title
.news__link.news__link_big
.news__column-right
.news__link-wrap
.news__link.news__link_small
.news__date
http://take.ms/uRJoh - допустим есть у меня вот такой блок. Только классы я называю так: .news, .news__head, и так далее, короче по БЭМ-у.
А если мне нужно вот эти элементы на скрине стрелками указаны, завернуть в блок-контент. То как его назвать? .news__head__content нельзя же
.news__head-content ?
Хочу добавить стилизацию checkbox и задумалась о корректности Вариант без стилизации
<div class="checkbox-inner">
<input class="checkbox__control" type="checkbox" id="test">
<label class="label__control" for="test"></label>
</div>
Стилизация внешнего вида
Вариант стилизации 1
модификатор .checkbox-inner_theme-info
<div class="checkbox-inner checkbox-inner_theme-info">
<input class="checkbox__control" type="checkbox" id="test">
<label class="label__control" for="test"></label>
</div>
Вариант стилизации 2
модификатор .checkbox-inner_theme-info
модификатор .checkboxcontrol_theme-info
модификатор .labelcontrol_theme-info
<div class="checkbox-inner checkbox-inner_theme-info">
<input class="checkbox__control checkbox__control_theme-info" type="checkbox" id="test">
<label class="label__control label__control_theme-info" for="test"></label>
</div>
Какой из вариантов предпочтительнее?
Заранее благодарна на помощь!
Суть в чем, используется common блоки на адаптивном проекте, у кнопок на тачах при первом клике вместо клика отрабатывает _hovered. Проблему можно повторить в том же project-stab - включаем в хроме эмуляцию какого-нибудь iphone 6 и жмем на кнопку dropdown.
Как можно вылечить? В исходниках кнопки модификатора hovered нет, откуда он приходит?
Не нашёл способ передать собственный идентификатор в компонент popup группы dropdown из bem-components.
Имеется в виду установка того идентификатора, который используется для связи popup и dropdown_switcher_button.
Как ни пытаюсь, в коде всё равно присутствует ... id="uniq14912161426251"
Максимум, чего удаётся добиться, это <popup ... data-bem='{"popup":{},"dropdown":{"id":"appUserNameDropdown"}}'>, но id всё равно uniq....
Как???
UPD
Так понял, это xjst'шный generateId(), безусловно дёргаемый в dropdown для получения своёства id, который в свою очередь дёргает this.identify(this.ctx), который вроде должен подхватывать свойство this.ctx.uniqueID (как я пробовал сначала), но на самом деле нет. (Такое ощущение, что до того identify, что находится в составе bem-core, дело даже не доходит, если это возможно...)
UPD
Ну да, конечно, там (bem-xjst/lib/bemhtml/bundle.js) свой indentify, вот такой:
exports.identify = function identify(obj, onlyGet) {
if (!obj)
return getUniq();
if (onlyGet || obj[uniqExpando])
return obj[uniqExpando];
var u = getUniq();
obj[uniqExpando] = u;
return u;
};
который вообще никуда не смотрит.
Т.е., выходит, расширять dropdown (popup?), чтобы переопределять нужные методы/свойства? Как правильно?
Добрый вечер! Пытаюсь собрать в один файл стили своих компонентов и стили в *.post.css-файлах из bem-components. Как понимаю, для этого нужна технология enb-postcss, которую я беру отсюда: https://github.com/awinogradov/enb-postcss Я добавляют postcss в технологии:
let postCSS = require('enb-postcss/techs/enb-postcss');
module.exports = function(config) {
config.node('bundles/index', function(nodeConfig) {
nodeConfig.addTechs([
...
[postCSS, {
comments : true,
sourcemap : true,
plugins : [require('postcss')()],
oneOfSourceSuffixes : [['post.css', 'css'], ['ie.post.css', 'ie.css']],
target: '?.post.css'
}]
]);
nodeConfig.addTargets(['?.post.css']);
});
};
В index.post.css получаю набор импортов в соответствии с построенным .deps.js файлом:
/* ../../libs/bem-components/common.blocks/button/button.post.css:begin */
@import "../../libs/bem-components/common.blocks/button/button.post.css";
/* ../../libs/bem-components/common.blocks/button/button.post.css:end */
/* ../../libs/bem-components/common.blocks/input/input.post.css:begin */
@import "../../libs/bem-components/common.blocks/input/input.post.css";
/* ../../libs/bem-components/common.blocks/input/input.post.css:end */
И теперь мне непонятно, куда и как мне передавать и этот файл, и stylus-файлы моих блоков, чтобы на выходе получить css-ку?
Привет. Я сделал модификатор input, который добавляет очень полезные функции. Можно ли использовать этот модификатор у наследника input - у textarea? Или это решается только через миксины?
Привет!
Мы, наконец, выпустили новые версии bem-core и bem-components!
Версия полностью обратносовместимая, так что обновление должно быть совершенно «бесплатным».
Главным изменением является совместимость с bem-xjst 8.x. Кроме того в версию вошла большая работа по переводу документации на английский и, конечно же, исправления ошибок и мелкие улучшения. Подробности читайте в changelog.
Версия также является обратносовместимой и не должна требовать никаких усилий при обновлении.
В ней обновлена зависимость от bem-core до 4.2.0, добавлено визуальное оформление для link_disabled и исправлены некоторые ошибки.
Подробности в changelog.
Эта версия обязательно требует обновления до bem-xjst 8, где появились новые полезные режимы и исправлена работа режима extend. Необходимые пакеты для сборки на ENB (enb-bemxjst 8.6.7) или gulp (gulp-bem-xjst 3.0.0) уже доступны для установки.
При переходе вам может пригодиться автоматический мигратор шаблонов: https://github.com/bem/bem-xjst/tree/master/migration#migration-tool-for-templates
Кроме новых шаблонов версия ничем не отличается от 5.1.0.
Свежие bem-core 4.2.0 и bem-components 6.0.0 уже внедрены в project-stub.
Если при обновлении у вас возникнут какие-либо проблемы — пишите, мы постараемся помочь.
Добрый день, столкнулся с такой проблемой:
Имеется блока "content" - <div class="content i-bem"><div class="content__wrap">...</div> и его js:
modules.define(
'content',
['i-bem__dom', 'jquery', 'location'],
function (provide, BEMDOM, $, location) {
provide(BEMDOM.decl(this.name, {
onSetMod: {
js: {
inited: function () {
this._loader = this.findBlockInside('loader');
location.on('change', this._onChangeLocation, this);
}
},
loading: {
true: function () {
this._loader.setMod('progress', true);
},
'': function () {
this._loader.delMod('progress');
}
}
},
_loadIssues: function (options) {
var uri = location.getUri();
options.url = uri.getQuery();
this._sendRequest(options);
},
_onChangeLocation: function (e, state) {
var uri = location.getUri(),
options = {};
this._loadIssues(options);
},
_sendRequest: function (options) {
this._abortRequest();
this.setMod('loading', true);
this._xhr = $.ajax({
type: 'POST',
dataType: 'html',
url: options.url,
data: {
jsonContent: true,
},
cache: false,
context: this
}).fail(function () {
console.log(fail);
}).done(function (html) {
this._onSuccess(html);
})
.always(function () {
this.delMod('loading');
});
},
_abortRequest: function () {
this._xhr && this._xhr.abort();
},
_onSuccess: function (html, type) {
type = type || 'update';
this._render(html, type, 'wrap');
},
_render: function (html, addMethod, elem) {
var wrap = (elem && this.elem(elem)) || this.domElem;
BEMDOM[addMethod](wrap, html);
}
}));
});
Суть проблемы в том, что когда мы подгружаем какой-то блок через ajax (Пусть будет "base"), 1 раз live функция срабатывает, но если вдруг мы вызовем другой блок (base1) и затем заного base, тот функция live уже не срабатывает, в следствии чего, не срабатывает и функция. (Пример) :
modules.define('base',
['i-bem__dom', 'BEMHTML', 'jquery', 'events__channels', 'base-rows'],
function(provide, BEMDOM, BEMHTML, $, channels) {
provide(BEMDOM.decl(this.name, {
onSetMod: {
'js' : {
inited: function() {
}
}
},
_onScroll: function() {
$('.base-body').scrollbar();
$('.base-body').height($(window).height() - 195);
$('.base-body').scrollbar();
$(window).resize(function () {
$('.base-body').height($(window).height() - 195);
});
},
_getBaseUpdate: function() {
}
}, {
live: function() {
this.prototype._onScroll();
this
.liveBindTo('update', 'pointerclick', this.prototype._getBaseUpdate());
}
}));
}
);
Первый раз, когда мы подгружаем блок <div class="base i-bem">...</div>, функция live срабатывает и вследствии чего, функцию _onScroll он вызывает, он если мы вызовем другой блок через ajax, а потом заново base, то уже функция _onScroll не срабатывает.
Подскажите, пожалуйста, как можно сделать, чтобы при каждом вызове через ajax, блок base, срабатывала автоматически функция _onScroll.
Что-то не могу сделать такую простую вещь, как забиндиться на onChange (а он есть?) radio-group из bem-components и получить значение?
Суть следующая: при изменении значения в группе радиокнопок b1__options нужно проверять значение, и если оно, например, равно 3, то делаем setMod(disabled) элементу b1__elem.
Собственно, застрял на этапе получения значения getVal().
Вот это никак не реагирует:
this._events(this._radioGroup).on('change', this._radioChange);
this._events(this._radioGroup).on('click', this._radioClick);
this._domEvents(this._radioGroup).on('change', this._radioChangeDom);
Отсюда пара вопросов:
change?А при DOM-событии клика вылетает ошибка (Uncaught TypeError: this._radioGroup.getValue is not a function):
this._domEvents(this._radioGroup).on('click', this._radioClickDom);
Глянуть можно тут: https://github.com/rteamx/project-stub/commit/eed20a6634a587c127d8ae8f39f56cac882123dd
Для воплощения самых неожиданных фантазий понадобилось уметь пробросить собственные атрибуты (не произвольные, определённый перечень) элементу __control компонентов из bem-components.
Как наиболее канонично это сделать?
В принципе, через свой уровень переопределения с прокачкой списка атрибутов из applyNext() оно работает. И вроде даже ничего ломать не должно.
Но есть ли возможность провернуть то же самое, используя обёртку?
Создать, например, блок my-input, который внутри себя использует блок input из bem-components.
И чтобы в тег input, который input__control, можно было пробросить некоторый атрибут my-attr.
Исходный проект - project-stub В корне проекта создана папка для своей библиотеки/дизайна. Структура такая же, как и в bem-components. Уровни добавлены в gulpfile levels: [ 'node_modules/bem-core/common.blocks', 'node_modules/bem-core/desktop.blocks', 'node_modules/bem-components/common.blocks', 'node_modules/bem-components/desktop.blocks', // 'node_modules/bem-components/design/common.blocks', // 'node_modules/bem-components/design/desktop.blocks', '.custom_libs/bove/design/common.blocks', '.custom_libs/bove/design/desktop.blocks', 'common.blocks', 'desktop.blocks' ],
При сборке выдает лог: Starting 'build'... events.js:160 [ throw er; // Unhandled 'error' event ^ 15:23:44Error: ENOENT: no such file or directory, scandir 'D:\Verstka\osipbove-bem-project.custom_libs\bove\design\desktop.blocks' ] at Error (native) The following tasks did not complete: build [15:23:44] Did you forget to signal async completion?
Process finished with exit code 1
Подскажите - куда копать при иных уровнях переопределения?
Доброго времени суток. Подскажите пожалуйста кто знает, почему в bem-components и bem-core не используется SASS, а вместо этого все манипуляции над css совершаются с помощью JS? Чем обусловлен такой подход? Хочется очень услышать аргументы.
И небольшое пожелание по поводу ваших библиотек для BEM: запилите реализацию норм грида. Спасибо
Привет, друзья!
Мы наконец-то выпустили долгожданную версию bem-components 5.0.0!
Это там самая версия, которая под капотом использует bem-core 4.1.1.
Как и в bem-components 4.0.0, в версию вошли сразу 2 набора стилей: исходники на postCSS и скомпилированный CSS на случай, если вы предпочитаете использовать какой-нибудь препроцессор.
В ближайшее время на bem.info появится документация на эту версию.
Кстати, вы обратили внимание, как круто она выглядит в новом дизайне?
По ходу своей работы, часто сталкиваюсь с ajax запросами внутри i-bem блоков. Часто повторяющиеся паттерны решил вынести в отдельную надстройку над jquery.ajax.
Допустим у вас есть кнопка, которая по клику на себя, добавляет куда то контент, а когда контента нет, удаляет сама себя
_onButtonClick: function () {
Http
.abortable(this)
.get(this.params.url)
.then(function (response) {
BEMDOM.replace(this.domElem, response.getText());
}.bind(this));
}
Eсли вдруг по кнопке нажали два раза, предыдущий запрос отмениться, так же навешаются правильные обработчики, которые, в случае удаления блока, остановят запрос и удалят все ненужные ссылки.
Или по клику на ссылку вам нужно подгрузить текст для модального окна, закешировать его, и при последующих кликах отдавать данные из кеша.
_onButtonClick: function () {
Http
.once(this)
.get(this.params.url)
.then(function (response) {
this.showModal(response.getText());
}.bind(this));
}
запрос на сервер отработает только единожды, последущие вызовы, этой функции, запросы на сервер делать не будут, просто буду возвращать отработанный промис.
Или вам нужно делать много разных запросов в разные места, но нужно чтобы выполнился только последний.
this._req = Http.abortable(this);
this._req.get(this.params.someUrl).then(this._onSomeDone); //этот запрос отменится, т.к следом идет другой
this._req.get(this.params.anotherUrl).then(this._onAnotherDone);
Не нужно плодить дополнительных переменных, самому вызывать abort() у jqXHR перед другим запросом.
Или если нужно сделать два разных запроса в разные места
Http.abortable(this, 'some').get(this.params.someUrl).then(this._onSomeDone);
Http.abortable(this, 'another').get(this.params.anotherUrl).then(this._onAnotherDone);
https://github.com/JiLiZART/bem-http
Ставим через bower install bem-http, и подключаем в уровнях { path: 'libs/bem-http/common.blocks', check: false }.
Пример как использовать в блоке https://github.com/JiLiZART/bem-http/blob/master/example.blocks/app/app.js
P.S. Если есть какие либо идеи по улучшению API, буду очень благодарен.
Всем привет! Наткнулся с небольшой проблемой, хотелось бы узнать как кто ее решает Для начала bemjson:
{
block: "page"
...
content : {
block : 'wrapper',
js : true,
content : [
{
block : 'popup',
mods : { theme: 'islands', target : 'anchor' },
directions : ['bottom-center'],
content : 'Содержимое всплывающего окна'
},
{
elem : 'show',
content: {
block : 'button',
mods: { theme : 'islands', size: 'm' },
text: 'Показать'
}
},
{
elem : 'hide',
content : {
block : 'button',
name: 'hide',
mods: { theme : 'islands', size: 'm' },
text: 'Скрыть'
}
}
]
}
}
и wrapper.js
modules.define('wrapper', ['i-bem__dom'], function(provide, BEMDOM){
provide(BEMDOM.decl(this.name,
{
onSetMod : {
js : {
inited : function () {
this.findBlockInside('popup').setAnchor(this);
this.findBlockInside('show', 'button')
.on(
'click',
this._onShow,
this
);
this.findBlockInside('hide', 'button')
.on(
'click',
this._onHide,
this
);
}
}
},
_onShow : function () {
this.findBlockInside('popup').setMod('visible', true);
},
_onHide : function () {
this.findBlockInside('popup').setMod('visible', false);
}
}
));
});
Примитивный пример ради демонстрации самой проблемы. Так вот при клике на кнопку показать всплывающее окно показывается, а вот скрыть его уже невозможно, если быть точнее, то после
this.findBlockInside('popup').setMod('visible', true);
поиск popup'a дает null и соответсвенно setMod сыпит. Все происходит потому, что узел с окошком меняет свое местоположение в дереве и из любой вложенности "перепрыгивает" вконец узла body. Конечно можно написать что-то типа этого
modules.define('wrapper', ['i-bem__dom'], function(provide, BEMDOM){
var popup;
provide(BEMDOM.decl(this.name,
...
inited : function () {
popup = this.findBlockInside('popup').setAnchor(this);
...
А если у нас, например, страница с кучей полей и валидацией на них, на которые нужно навешать всплывающие подсказки при ошибочном вводе, то мне такой способ кажется не самым лучшим. Так вот собственно вопрос, почему именно так реализовано и как правильнее решить сложившуюся ситуацию?
Доопределяю через модификтор блок input для работы с датами (выбор из всплывающего календаря, преобразования js-date/readable string). Испольую mods : { date : true } и, соотв.:
modules.define('input', [ ... ], function (...) {
provide(Input.decl({ modName : 'date', modVal : true }, {
/* мой код модуля */
} ));
});
Могу ли по аналогии с расширением класса использовать методы блока-родителя? Т.е., напр. определить свой метод setVal(), который будет передавать преобразованное значение родительскому методу setVal()?
Думал достучаться через this.__base, но примеров такого подхода не обнаружил.
Это возможно? Как?
Есть задача менять (добавлять, удалять) пункты меню в выпадающем списке (menu в select).
Сойчас решаю проблему полной перегенерацией блока. Примерно так: BEMDOM.update(..., BEMHTML.apply(...)). Пока встречается не очень часто, но как-то всё же не красиво, да хотелось бы иметь способ на будущее.
Похожий способ, но тоже не очень вариант: в select есть доступ к вложенному menu (свойство _menu) методом setContent заменять содержимое на сгенерированный html.
Можно ли придумать способ, чтоб это было похоже на оперирование с элементами массива или через интерфейс inset/append/remove? Ну хоть как-то вообще?
При добавлении select после загрузки страницы, данный select не работает.
При взаимодействии с созданным select в консоли браузера появляется ошибка:
Uncaught TypeError: Cannot read property 'setMod' of undefined.
Подключенные файлы: bem-components-dist/desktop/bem-components.css bem-components-dist/desktop/bem-components.js+bemhtml.js
JS:
modules.define('filter-form', ['i-bem__dom'], function(provide, BEMDOM) {
provide(BEMDOM.decl(this.name, {
onSetMod: {
js: {
inited: function() {
this.findBlockInside('select').on('change', function() {
var value = this.getVal();
console.log(value);
});
}
}
}
}));
});
Подскажите пожалуйста как решить данную проблему?