Войти с помощью github

Адепты 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. (profile_settings.min.js:1643) at Function._liveClassTrigger (profile_settings.min.js:1618) at HTMLBodyElement.f (jquery.min.js:2) at HTMLBodyElement.dispatch (jquery.min.js:3) at HTMLBodyElement.r.handle (jquery.min.js:3)

Конкретно в этом месте:

_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 по следующему сценарию:

  1. Допустим, мы имеем 3 select-блока с модификатором disabled (до инициализации), например: country, city, street.

  2. После автоматической (domReady) инициализации, первый select-блок (country) выполняет обращение к API, получает данные в json-формате, заполняется пунктами, на основании полученного массива данных и в случае успеха, с первого блока снимается модификатор disabled.

  3. Выбираем пункт country, получаем значение выбранного пункта, формируем запрос к API, получаем ответ, заполняем пункты второго блока (city), снимаем модификатор disabled со второго блока.

  4. Выбираем пункт city, получаем значение выбранного пункта, формируем запрос к API, получаем ответ, заполняем пункты третьего блока (street), снимаем модификатор disabled со третьего блока.

  5. При изменении значения, для нижестоящих по иерархии (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="{&quot;select&quot;:{&quot;name&quot;:&quot;select3&quot;,&quot;text&quot;:&quot;—&quot;}}">
  <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="{&quot;button&quot;:{}}" 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>

Стилизация внешнего вида enter image description here

Вариант стилизации 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-core 4.2.0

Версия полностью обратносовместимая, так что обновление должно быть совершенно «бесплатным».

Главным изменением является совместимость с bem-xjst 8.x. Кроме того в версию вошла большая работа по переводу документации на английский и, конечно же, исправления ошибок и мелкие улучшения. Подробности читайте в changelog.

bem-components 5.1.0

Версия также является обратносовместимой и не должна требовать никаких усилий при обновлении.

В ней обновлена зависимость от bem-core до 4.2.0, добавлено визуальное оформление для link_disabled и исправлены некоторые ошибки.

Подробности в changelog.

bem-components 6.0.0

Эта версия обязательно требует обновления до 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);

Отсюда пара вопросов:

  1. Есть ли change?
  2. Почему не происходит BEM-событие?

А при 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);
                                });
                            }
                        }
                    }
                }));

            });

Подскажите пожалуйста как решить данную проблему?