Popup menu - собрать js по деталькам, с исправлением багов

Ребята, помогите собрать JS-блока.

Цель: 1) Получить реализацию блока в технологии JS 2) Получить минимум знаний по JS в методологии БЭМ, для дальнейшего +/-самообучения

Исходные данные:

Блок sitemap, элемент button__icon_close
Блок button с миксом menu__button, блок расположен вне блока sitemap
Знание JS - ноль.
Знание ООП - поверхностное на уровне новичек, язык с#
Структура файлов:

BEMJSON:

{
    block: 'sitemap',
    js : true,
    content: [
            {
                block: 'button',
                mix : { block : 'sitemap', elem : 'button' },
                attrs : { title : 'Закрыть меню' },
                icon: {
                    elem: 'icon',
                    tag: 'span',
                    elemMods: {close: true}
                }
            } 
    ]
},
{
    block: 'button',
    mix: {block: 'menu', elem: 'button', theme: 'menu'},
    url: '#',
    title: 'Открыть меню сайта',
    content: 'Меню',
    tabIndex: 2
}

Поиск решения:

Первое что попробовал - вывести лог при клике.

modules.define(
    'sitemap',
    ['i-bem-dom'],
    function(provide, BEMDOM) {

    provide(BEMDOM.decl(this.name, {
        onSetMod : {
            js : {
                inited : function () {
                    this.bindTo('click', function () {
                        console.log('click');
                    })
                }
            }
        }
    }));
});

Консоль браузера сразу заругалась:

jQuery.Deferred exception: i.decl is not a function TypeError: i.decl is not a function
    at Object.<anonymous> (http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:35:58)
    at http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:1:1662
    at c (http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:1:1009)
    at R (http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:1:1792)
    at http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:1:1641
    at HTMLDocument.<anonymous> (http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:2:8353)
    at j (https://yastatic.net/jquery/3.1.0/jquery.min.js:2:29568)
    at k (https://yastatic.net/jquery/3.1.0/jquery.min.js:2:29882) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
k @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: i.decl is not a function
    at Object.<anonymous> (index.min.js:35)
    at index.min.js:1
    at c (index.min.js:1)
    at R (index.min.js:1)
    at index.min.js:1
    at HTMLDocument.<anonymous> (index.min.js:2)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

в шапке модуля меняю i-bem-dom на i-bem__dom, консоль без ошибок, как и без ожидаемого console.log

Пока в ступоре, и вопросов немного: 1) В чем может быть ошибка, этого простого кода? 2) Как подписаться на событие click блока button, который вне блока sitemap?

7 years ago

tadatuta

this.bindTo — это метод i-bem__dom из предыдущей версии bem-core. Начиная с v4.0.0 элемент i-bem__dom был превращен в самостоятельный блок i-bem-dom и поменялась работа с событиями.

Отличия между версиями описаны в миграционном гайде: https://ru.bem.info/platform/libs/bem-core/4.1.1/migration/ Про причины изменений рассказывал @veged на Я.Субботнике: https://events.yandex.ru/lib/talks/3685/

В «современном» мире вызвать console.log() по клику на sitemap можно так:

modules.define(
    'sitemap',
    ['i-bem-dom'],
    function(provide, BEMDOM) {

    provide(BEMDOM.declBlock(this.name, {
        onSetMod : {
            js : {
                inited : function () {
                    this._domEvents().on('click', function () {
                        console.log('click');
                    })
                }
            }
        }
    }));
});

Чтобы в целом ознакомиться с использованием i-bem.js рекомендую https://ru.bem.info/platform/i-bem/

7 years ago