Как отловить событие в блоке

Форум /

Второй день читаю мануал, смотрю форум и нет внятных примеров как организовать взаимосвязь между блоками, как подписываться на события....

Вообщем проблема: Необходимо при выборе элемента в 'Select-e' изменить иконку в блоке 'language-icon' Решил сделать модификатор 'icon' к блоку 'language-icon' в css они прописаны так:

.language-icon_icon_ru{ background-image: url('icons/flags_ru.png'); }

.language-icon_icon_en{ background-image: url('icons/flags_us.png'); }

Вот описание блока: language

.bemtree.js

block('language')({
    content: () => [
        {
            block: 'language-icon',
            mods:{ size: "24", icon: 'ru'},
            js: true,
        },
        {
            block: 'select',

            mods: {
                mode: 'radio',
                theme: 'skay',
                size: 'm'
            },
            mix: [
                {
                    block: 'block_name',
                    elem: 'control-lang',
                    js: true,
                },
            ],
            width:'available',
            name: 'select1',
            val: 1,
            options: [
                {
                    val: 1,
                    text: 'Русский',
                    icon: {
                        block: 'icon',
                        url: 'icons/flags_ru.png'
                    }
                },
                {
                    val: 2,
                    text: 'English',
                    icon: {
                        block: 'icon',
                        url: 'icons/flags_us.png'
                    }
                }
            ]
        } 
    ]
});

.bemhtml.js
block('language')(
    js()(true),
    addJs()(true),
    tag()('div')
);

.deps.js
({
    mustDeps: ['i-bem-dom'],
    shouldDeps: ['icon', 'select', 
    {
        block: 'select',
        mods: {
            mode: 'radio',
            theme: 'skay',
            size: 'm'
        }
    }]
})

.js
modules.define('language', ['i-bem-dom', 'events', 'BEMHTML', 'select'],
function(provide, bemDom, events, BEMHTML, Select, $) {

    function change(e){
        // ответ приходит при смене языка. 1 или 2. отлично!
        console.log("lang: " + e.target.getVal());

        /*
        Что тут нужно написать, чтобы изменить модификатор 'icon' у блока 'language-icon' ?

        */
    }

    provide(bemDom.declBlock(this.name, {
        onSetMod : {
            'js' : {
                'inited': function() {
                    this._events(Select).on('change', change);
                }
            }
        },
    }));
});

4 years ago

pvitaly500

var block = {
    icon: null,
};

modules.define('language', ['i-bem-dom', 'events', 'BEMHTML', 'select'],
function(provide, bemDom, events, BEMHTML, Select, $) {

    function change(e){
        if(e.target.getVal() == 1){
            block.icon.setMod('icon', 'ru');
        }else if(e.target.getVal() == 2){
            block.icon.setMod('icon', 'en');
        }
    }

    provide(bemDom.declBlock(this.name, {
        onSetMod : {
            'js' : {
                'inited': function() {
                    this._events(Select).on('change', change);
                }
            }
        },
    }));
});

modules.define('language-icon', ['i-bem-dom', 'events', 'BEMHTML', 'control'], function(provide, bemDom, events, BEMHTML, Control) {
    provide(bemDom.declBlock(this.name,{
        onSetMod : {
            'js' : {
                'inited': function() {
                    block.icon = this;
                }
            }
        },
    }));    
});

Вот так работает, но что то мне подсказывает это костыль)

4 years ago

lilliputten

Вообще более правильно как-то так:

  this.findChildBlock(BlockDefinition).setMod(...)

См. Работа с DOM-деревом / Клиентский JavaScript (i-bem.js) / Классический БЭМ-стек / Технологии / БЭМ

4 years ago

pvitaly500

Спасибо. Откуда взялся BlockDefinition? и как его получить?

4 years ago

pvitaly500

modules.define('language', ['i-bem-dom', 'events', 'BEMHTML', 'select', 'language-icon'],
function(provide, bemDom, events, BEMHTML, Select, LanguageIcon) {

    function change(e){
        if(e.target.getVal() == 1){
            this.findChildBlock(LanguageIcon).setMod('icon', 'ru');
        }else if(e.target.getVal() == 2){
            this.findChildBlock(LanguageIcon).setMod('icon', 'en');
        }
    }

    provide(bemDom.declBlock(this.name, {
        onSetMod : {
            'js' : {
                'inited': function() {
                    this._events(Select).on('change', change);
                }
            }
        },
    }));
});

modules.define('language-icon', ['i-bem-dom'], function(provide, bemDom) {
    provide(bemDom.declBlock(this.name));    
});

Вроде разобрался. Спасибо.

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