I-bem.js статические методы

Форум /

У блоков в bem.js представлении есть методы экземпляра и статические методы, Я хочу из одного блока обращаться к другому к примеру по event mouseover я показываю popup. я вешаю обработчик на блок который ловит событие такого содержания:

_mouseover: function(e){
    columnPopup.openByModsAlign(this._align);
},

Сам же блок columnPopup он находится в зависимостях у этого блока, columnPopup есть статический метод openByModsAlign который не православным методом с помощью jquery добавляет модификатор,

openByModsAlign : function(mods) {
    $('.column-popup_align_' + mods).addClass('column-popup_visible');
    $('.column-popup_align_' + mods).removeClass('column-popup_closing');
}

Хочется использовать как в методах экземпляра конструкцию типа

openByModsAlign : function(mods) {
    this.setMod('visible');
    this.delMod('closing');
}

Как правильно заюзать метод в моем случае? То что я написал это временный костыль который на мой взгляд не верен, в рамках БЭМА

9 years ago

tadatuta

@AndreyGladkov Например, так:

modules.define('b1', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                // сохраняем ссылку на экземпляр попапа
                this._popup = this.findBlockInside('columnPopup');
                this.bindTo('mouseover', this._onMouseOver);
            }
        }
    },
    _onMouseOver: function(e) {
        this._popup.openByModsAlign(this._align);
    },
}));

});

Как вариант, если есть уверенность, что columnPopup гарантированно может быть только один на странице, можно в момент инициализации сохранять ссылку на него в this.__self._instance.

9 years ago

AndreyGladkov

Наверное я плохо выразился, у меня два разных блока, к примеру блок link, по ховеру на него вызывается метод другого блока

modules.define('link', ['jquery',  'column-popup'], function(provide, $, columnPopup, link) {
    // Доопределяем базовый блок с модификтором _show-colum-popup
    provide(link.decl({ modName : 'show-colum-popup', modValue: true }, {
        /*Методы экземпляра*/
        onSetMod: {
            'js': {
                'inited': function() {
                    this._align  = this.params.showPopup.align;

                    this.bindTo('mouseover', function(e){
                        this._mouseover(e);
                    });

                }
            }
        },

        _mouseover: function(e){
            columnPopup.openByModsAlign(this._align);
        },

    }));
});

Другой блок который показываем

modules.define('column-popup', ['i-bem__dom', 'jquery'], function(provide, BEMDOM, $){
    provide(BEMDOM.decl(this.name,
        {
            /* методы экземпляра */
            onSetMod: {
                'js': {
                    'inited': function() {
                        this.bindTo('mouseleave', function(e){
                            this._mouseleave(e);
                        });
                    }
                }
            },
            _mouseleave : function(e){
                this.setMod('closing');
                this.delMod('visible');
            }

        },
        {
            /* статические методы */
            openByModsAlign : function(mods) {
                $('.column-popup_align_' + mods).addClass('column-popup_visible');
                $('.column-popup_align_' + mods).removeClass('column-popup_closing');
                this.setMod('visible');/*Хочу так*/
                this.delMod('closing');/*Хочу так*/
            }
        }));
});

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

9 years ago

AndreyGladkov

Очень жду помощи о том как же сделать это по методологии..

9 years ago

tadatuta

Подходят оба варианта, которые я предложил. Если вложить column-popup внутрь link (код не проверял, воспринимать как иллюстрацию идеи):

modules.define('link', function(provide, link) {

// Доопределяем базовый блок с модификтором _show-colum-popup
provide(link.decl({ modName : 'show-colum-popup', modValue: true }, {
    /*Методы экземпляра*/
    onSetMod: {
        'js': {
            'inited': function() {
                this._align = this.params.showPopup.align;
                this._popup = this.findBlockInside('column-popup'); // можно находить column-popup-ы с необходимыми align.

                this.bindTo('mouseover', this._mouseover);
            }
        }
    },

    _mouseover: function(e){
        this._popup.openByModsAlign(this._align);
    }
}));

});

modules.define('column-popup', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    /* методы экземпляра */
    onSetMod: {
        'js': {
            'inited': function() {
                this.bindTo('mouseleave', this._mouseleave);
            }
        }
    },
    _mouseleave : function(e){
        this
            .setMod('closing')
            .delMod('visible');
    },
    openByModsAlign : function(mods) {
        this
            .setMod('visible')
            .delMod('closing');
    }
}));

});

Либо не вкладывая, но допуская, что попапы могут быть только по одному на каждый тип align:

modules.define('link', ['colum-popup'], function(provide, popup, link) {

// Доопределяем базовый блок с модификтором _show-colum-popup
provide(link.decl({ modName : 'show-colum-popup', modValue: true }, {
    /*Методы экземпляра*/
    onSetMod: {
        'js': {
            'inited': function() {
                this._align = this.params.showPopup.align;

                this.bindTo('mouseover', this._mouseover);
            }
        }
    },

    _mouseover: function(e) {
        popup.openByModsAlign(this._align);
    }
}));

});

modules.define('column-popup', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    /* методы экземпляра */
    onSetMod: {
        'js': {
            'inited': function() {
                var popups = this.__self.popups = this.__self.popups || {};
                popups.align = this.getMod('align');
            }
        }
    },
    _mouseleave : function(e){
        this
            .setMod('closing')
            .delMod('visible');
    }
}, {
    openByModsAlign : function(align) {
        this.popups[align]
            .setMod('visible')
            .delMod('closing');
    }
}));

});

Ну и можно через всякие pub/sub и прочие варианты реализовать.

9 years ago

voischev

@tadatuta во втором куске кода у блока link кажется забыл объявить popup

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