Микс элемента и блока, работа с модификаторами и обработка onclick

Всем привет.

Есть блок week-editpanel, внутри него элемент famous_day (с помощью replace он станет button из bem-components). Файловая труктура блока:

week-editpanel famous_day week-editpanelfamous-day.bemhtml.js week-editpanel__famous-day.deps.js week-editpanel.css week-editpanel.deps.js week-editpanel.js

Содержимое week-editpanel__famous-day.bemhtml.js, week-editpanel.js и результат рендеринга элемента-блока famous_day выложил сюда

Что пытаюсь сделать Элемент famous-day так именован для удобства работы со всем блоком (например в блоке может быть много button или button toggable, но все они будут иметь разные имена), а уже в bemhtml миксоваться с button. Т.е. на выходе хочу получить элемент, который работает и как button toggable, и переносит все свойства и js методы из famous-day

Поставил перед собой две задачи:

Разобраться с onClick по элементу внутри блока
Разобраться с изменением модификатора примиксованного блока

С первым что-то отдалённое получилось, однако этот пример реализовать не удалось. Со вторым вообще ничего. Скорее всего у меня проблема в понимании как работать с примиксованными блоками. По второй задаче не удаётся отловить когда button toggable становится checked. Ставил анонимную функцию на обработку любых изменений модификатора и элемента - при клике ноль реакции

8 years ago

tadatuta

Похоже, что всему виной банальная опечатка famous_day -> famous-day.

8 years ago

alexanderbondarchuk

@tadatuta нелепая ошибка копипаста. Исправил, получилось.

А как быть с миксом блока button и элемента famous-day, а точнее с обработкой через js? Не понимаю на что завязываться - с одной стороны это блок, с другой элемент. Но именно у блока появляется нужный мне модификатор checked. Если завязываться на блок, то мне нужно проверять что он же является элементом famous-day (ведь как уже писал выше может быть несколько блоков button, но не все они famous-day).

В описании i-bem нашёл небольшую справку о decl.baseMix, но не понимаю как этим воспользоваться. Попробовал в файл week-editpanel.js a добавить ещё один modules.define для самого микса, пример здесь, но после этого весь js на странице сломался.

8 years ago

alexanderbondarchuk

Вопрос пока остаётся открытым

8 years ago

tadatuta

Методы поиска предоставляют возможность передать им первым опциональным аргументом элемент: https://ru.bem.info/libs/bem-core/v2.8.0/desktop/i-bem/jsdoc/#jsdoc-findBlockInside-1

Т.е. можно делать так:

var famousDayButton = this.findBlockInside('famous-day', 'button'); // найти блок button на своем элементе 'famous-day'

famousDayButton.hasMod('checked'); // проверяем, есть ли нужный модификатор

Если нужно подписываться на событие изменения этого модификатора, то можно передавать контекст в метод подписки:

modules.define('week-editpanel', ['i-bem__dom', 'button'], function(provide, BEMDOM, Button) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                Button.on(this.elem('famous-day'), { modName: 'checked', modVal: '*' }, function() {
                    console.log('поменялся модификатор checked на блоке button, смиксованном с элементом week-editpanel__famous-day');
                });
            }
        }
    }
}));

});

8 years ago

alexanderbondarchuk

Всё получилось, спасибо

Чтобы оставлять комментарии, необходимо авторизоваться.