Войти с помощью github
Форум /
8 years ago

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

DjonyBastone
methodology
i-bem.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?

8 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/

8 years ago
DjonyBastone

Спасибо...

Получается документация https://ru.bem.info/platform/i-bem/ - не актуальна!?

Блин.. я же всё о i-bem.js распечатал - целую книжку :D

8 years ago
DjonyBastone

@tadatuta недавно решали подобную задачу - закрытие окна(modal) по нажатию крестика (modal__close):

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

    const ModalClose = bemDom.declElem('modal', 'close', {}, {
        lazyInit: true,

        onInit() {

            this._domEvents().on('click', function() {
                this._block().delMod('visible');
            });
        }
    });

    provide(ModalClose);

});

Как удалить модификатор у блока - sitemap_visible, по нажатию крестика - button__icon_close ? здесь модификатор, в примерах не увидел подобного...

8 years ago
tadatuta

Получается документация https://ru.bem.info/platform/i-bem/ - не актуальна!? Блин.. я же всё о i-bem.js распечатал - целую книжку :D

Свежак выкатили 2 февраля.

8 years ago
DjonyBastone

31 января распечатал - промазал в пару дней >D

https://ru.bem.info/forum/1245/#comment-277466329 - еще нужна помощь

8 years ago
tadatuta

Как удалить модификатор у блока - sitemap_visible, по нажатию крестика

Как всегда, это можно сделать по-разному. Хороший вариант — в блоке sitemap подписаться на клик по кнопке (событие всплывет наверх).

При этом, чтобы отличить кнопку-закрывашку от остальных кнопок, к ней можно примиксовать элемент блока sitemap.

В JS коде для элемента подписываться на БЭМ-событие click у блока button и эмитить собственное событие клик. Тогда на него можно будет подписываться с lazyInit.

Ну т.е. идея очень похожая на то, что сделано для закрытия modal, с тем лишь отличием, что в элементе close блока sitemap вместо подписки на DOM-событие будет подписка на БЭМ-событие блока button:

modules.define('sitemap__close', ['i-bem-dom', 'button'], function(provide, bemDom, Button) {

    provide(bemDom.declElem('sitemap', 'close', {}, {
        lazyInit: true,

        onInit() {
            // здесь можно не бояться подписываться на все кнопки внутри элемента close, т.к. каких-либо других кнопок не предполагается
            this.events(Button).on('click', function() {
                this._emit('click'); // на это событие элемента close будем подписываться из самого блока sitemap
            });
        }
    }));

});

Если же экономить чернила и забить на ленивую инициализацию, то можно обойтись просто

this._events(this.findChildElem('close').findBlockOn('button'))
    .on('click', function() { this.delMod('visible') });

но лучше не экономить ;)

8 years ago
DjonyBastone

Правильно ли я понимаю- что, привязываться к модификатору элемента закрывашки не стоит (если это вообще возможно) ?

8 years ago
tadatuta

В смысле к модификатору блока button? Не стоит, т.к. этот модификатор не имеет прямого отношения к блоку sitemap. Идея в том, что элемент sitemap__close может быть реализован через что угодно: самостоятельно, через блок button с или без модификатора или вообще через какой-то другой блок, поэтому завязка на свой элемент всегда надежнее и гибче.

Но, разумеется, если обсуждать вариант, как решить задачу за минимум символов кода, то многое можно сократить в ущерб надежности и расширяемости. В т.ч. отказаться от отдельного элемента для закрывашки, отказаться от ленивой инициализации и тогда можно подписаться непосредственно на найденный внутри блок button с нужным модификатором.

8 years ago
DjonyBastone

Код из комментария -https://ru.bem.info/forum/1245/#comment-277467485 modules.define('sitemap__close', ['i-bem-dom', 'button'], function(provide, bemDom, Button) {

provide(bemDom.declElem('sitemap', 'close', {}, {
    lazyInit : true,

    onInit() {
        this.events(Button).on('click', function() {
            console.log('clickClose');
                this._emit('click');
        });
    }

}));

}); Есть вопросы: 1) При сборке Gulp выдает ошибку, лог: [10:48:35] 'build' errored after 5.75 s [10:48:35] GulpUglifyError: unable to minify JavaScript Caused by: SyntaxError: Unexpected token punc «(», expected punc «:» (line: 6, col: 14, pos: 194)

минификатор JS ругается чего-то

2) 7я строка: events или _events ?

3) При попытке вывести console.log по клику, ни чего в консоле не произошло. Как понять что код работает?

8 years ago
tadatuta
  1. Минификатор ругается, т.к. не осилил ES6 синтаксис: onInit() { -> onInit: function() {
  2. Конечно, _events, опечатался.
  3. После исправления _events у меня выводится, сделал веточку: https://github.com/bem/project-stub/tree/issues/1245
8 years ago
DjonyBastone

Дублирую сюда gulpfile крушит JavaScript с данным конфигом. Не разобрался, но именно замененный gulpfile (с моего проекта) крошил выполнение js в sitemap__close

8 years ago
DjonyBastone

Вроде разобрался. Скорее всего проблема была в отсутствии плагина "gulp-if"

Установка данного плагина, разрешила прошлую проблему:

onInit() {
       /.../
        });

Минификатор не ругается, ES6 синтаксис - ни при чем оказалcя

8 years ago
DjonyBastone

Данный модуль, пока не может удалить модификатор visible

modules.define('sitemap__close', ['i-bem-dom', 'button'], function(provide, bemDom, Button) {

    provide(bemDom.declElem('sitemap', 'close', {}, {
        lazyInit : true,

        onInit() {
            this._events(Button).on('click', function() {
                // console.log('clickClose');
                this._emit('click', function() {
                    this.delMod('visible');
                    console.log('visibleClose');
                });
            });
        }

    }));
});

Вопросы по решению: 1) Нужно ли писать отдельный модуль для блока sitemap в этом же файле? 2) Если не нужно то каким образом удалить модификатор? Ведь везде стоит this (sitemap__close), и логично что this.delMod('visible'); - должен удалить модификатор на себе, а не на родителе.

8 years ago
tadatuta

Минификатор не ругается, ES6 синтаксис - ни при чем оказалось

ES6 по-прежнему будет падать при сборке в продакшен-режиме (когда будет запускаться uglifyJS. Просто в недавнем обновлении gulp конфига в project-stub как раз добавилось разделение на режимы, что в девелопменте сборка происходила шустрее: https://github.com/bem/project-stub/pull/232

8 years ago
tadatuta

Данный модуль пока не может удалить модификатор visible

  1. Нужно ли писать отдельный модуль для блока sitemap в этом же файле?
  2. Если не нужно то каким образом удалить модификатор? Ведь везде стоит this (sitemap__close), и логично что this.delMod('visible'); - должен удалить модификатор на себе, а не на родителе.

Предполагалось, что да — нужно создать JS-реализацию блока sitemap, поймать всплывшее событие и там удалить модификатор. Но как всегда в случае экономии кода можно чуть сократить и воспользоваться тем фактом, что у элементов есть ссылка на родительский блок: this._block.

8 years ago
DjonyBastone
modules.define('sitemap__close', ['i-bem-dom', 'button'], function(provide, bemDom, Button) {

    provide(bemDom.declElem('sitemap', 'close', {}, {
        lazyInit : true,

        onInit: function() {
            this._events(Button).on('click', function() {
                this.delMod('visible');
                console.log('VisibleClose');
            });
        }
    }));
});

В консоли получил VisibleClose. Значит удалил бы модификатор у sitemap__close_visible, если бы такой элемент существовал. Но существует только - sitemap_visible. this._block.delMod('visible'); - не помогает, консоль ругается - delMod не является функцией. Ну это и понятно. Пробовал даже - this.findParentBlock(sitemap).delMod('visible') - то же не знает такого блока, т.к. находимся в элементе sitemap__close. В ступоре. Вот - не хватает пару пазлов в голове, что бы прояснить взаимодействие блоков!

  • "Что и куда" нужно вставить в код, что бы удалить модификатор? Если у элементов есть ссылка на родительский блок..

P.S. Прошу не материть, первые шаги в JS

8 years ago
tadatuta

Про _block я неправильно подсказал — это не свойство, а метод. Так что работающий вариант выглядит так:

this._block().delMod('visible');

Ну а если «по полной программе», то как-то так:

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

provide(bemDom.declBlock(this.name, {}, {
    lazyInit : true,

    onInit: function() {
        // подписываемся на БЭМ-событие click собственного элемента close
        this._events(Close).on('click', function() {
            this.delMod('visible');
        });
    }

}));

});


modules.define('sitemap__close', ['i-bem-dom', 'button'], function(provide, bemDom, Button) {

provide(bemDom.declElem('sitemap', 'close', {}, {
    lazyInit : true,

    onInit: function() {
        // подписываемся на БЭМ-событие click вложенного блока button
        this._events(Button).on('click', function() {
            // триггерим БЭМ-событие click на себе (т.е. на sitemap__close, оно всплывет наверх)
            this._emit('click');
        });
    }

}));

});
8 years ago
DjonyBastone

ЗАРАБОТАЛО!!! УРА

Володя спасибо. ))))

Примерно понятно куда смотреть далее. Пойду открывашку оживлять .

8 years ago
rtemision

Получается документация https://ru.bem.info/platform/i-bem/ - не актуальна!? Блин.. я же всё о i-bem.js распечатал - целую книжку :D

Свежак выкатили 2 февраля.

Круто, сам на днях попал, разбираясь почему не происходит инициализация (в документации был старый пример с i-bem__dom).

Там раздел коллекций не открывается.

8 years ago
DjonyBastone

Вопрос:

  • Как подписаться на БЭМ-событие элемента, который находится на другой ветке БЭМ-дерева (так же и HTML-дерева) ?

проще: можно ли подписаться на БЭМ-событие элемента footer__call который в футере, из Блока Хэдер?

Как это сделать? Вообще это возможно?

8 years ago
tadatuta

@rteamx

Там раздел коллекций не открывается.

Спасибо, исправил: https://github.com/bem-site/bem.info/pull/156 Завтра появится на сайте.

8 years ago
tadatuta

@DjonyBastone

можно ли подписаться на БЭМ-событие элемента footer__call который в футере, из Блока Хэдер?

Вариантов несколько:

  1. Т.к. события всплывают, можно подписаться на событие из ближайшего общего родителя. В данном случае это, видимо, будет блок page. При этом нужно понимать, что элементы для того и задуманы, чтобы скрывать детали реализации блока от внешнего мира и если возникает необходимость подписаться на событие элемента, по-хорошему нужно сначала поймать событие элемента из его блока и там сгенерировать событие уже от лица самого блока.
  2. Связать разные узлы DOM-дерева в едины БЭМ-блок с помощью https://ru.bem.info/platform/i-bem/html-binding/#Один-js-блок-на-нескольких-html-элементах
  3. Воспользоваться каналами событий: https://ru.bem.info/platform/libs/bem-core/4.1.1/desktop/events/#Элементы-блока-15

Первый вариант кажется наиболее подходящим в данном случае.

8 years ago
DjonyBastone
modules.define('header', ['i-bem-dom', 'menu'], function(provide, bemDom, Menu) {
    provide(bemDom.declBlock(this.name, {}, {
        lazyInit : true,
        onInit: function() {
            // подписываемся на БЭМ-событие click собственного элемента menu
            this._events(Menu).on('click', function() {
                //устанавливаем модификатор на себе
                this.setMod('visible');
            });
        }
    }));
});

код работает.

Структура блока 'header'

header/
    menu/
    sitemap/

Необходимо установить модификатор 'visible' - вложенному блоку 'sitemap' Мне кажется должно быть аналогичное решение:

// назначить модификатор элементу блока
this.setMod(this.elem('elemName'), 'modName', 'modValue');

Как из родителя назначить модификатор блоку?

8 years ago
DjonyBastone
modules.define('header', ['i-bem-dom', 'menu'], function(provide, bemDom, Menu, Sitemap) {
    provide(bemDom.declBlock(this.name, {}, {
        lazyInit : true,
        onInit: function() {
            // подписываемся на БЭМ-событие click собственного элемента menu
            this._events(Menu).on('click', function() {
                //пробуем установить модификатор на вложенном sitemap
                this.findChildBlock(Sitemap).setMod('visible');
            });
        }
    }));
});

Так тоже не работает((

Как из родителя назначить модификатор блоку?

8 years ago
DjonyBastone

Народ. Оформил первый в жизни JS с вашей помощью. Кое-что сам додумал. Пожалуйста посмотрите gist сориентируйте. что не так, что можно улучшить..

https://gist.github.com/DjonyBastone/80efa9c80f713e479b9b04b6e49ffb8e

Нужна обратная связь

8 years ago
ilyar

Знание JS - ноль.

https://ru.hexlet.io/courses/programming-basics буквально за неделю будет выше нуля

8 years ago
DjonyBastone

@Il'yar спасибо, очень кстати.

Цель просмотра вами кода в гист (https://ru.bem.info/forum/1245/#comment-278247503) - оценка "БЭМ/неБЭМ" и что можно улучшить..

Если кто-то даст обратную связь, буду рад.

8 years ago
ilyar

По гисту сильно не всматривался, вижу несколько очевидных рекомендаций:

  • использовать шаблоны для блоков;
  • добавить JSDoc;
  • добавить декларативности, завернув обработчики в методы.
8 years ago
ilyar

@DjonyBastone Есть встречное предложение.

Надо сделать PR решающий этот запрос https://github.com/ilyar/bem-examples/issues/1

Польза: практика использования БЭМ-стека; максимум обратной связи "БЭМ/неБЭМ".

— Можно мне взять эту задачу? Все задачи на этой странице еще не решены. Если задача вам интересна — берите и смело делайте. Спрашивать разрешения и становиться в очередь не нужно. Даже если кто-то сделает задачу быстрее вас, не останавливайтесь — ваше решение может быть лучше. Это Open Source! by cultofmartians.com

cc @frimen cc all

8 years ago
ilyar

Пример одного PR, чтобы уловить суть момента, надо проследить все комментарии их всего 21 (https://github.com/bem/project-stub/pull/39).

Чтобы оставлять комментарии, необходимо авторизоваться.
Исходный код БЭМ_форумаСообщить об ошибке