Событие на "КЛИК" по кнопке в блоке 'control-group'

Форум /

Всем привет. Подскажите, пожалуйста, как правильно отреагировать на событие клик по первому блоку button в такой DOM-моделе

{
        block : 'control-group',
        content : [
              {
                       block : 'input',
                        mix: { block: 'header', elem: 'search-input' },
                       mods : { theme : 'islands', size : 'l', type : 'search' }

                },
                {
                         block : 'button',
                         mods : { theme : 'islands', size : 'l' },
                          icon : {
                                 block : 'icon',
                                  mods : { type : 'earth' }
                           }
               },
               {
                    block : 'button',
                    mods : { theme : 'islands', size : 'l', type: 'submit' },
                    text : 'Поиск'
               }
                  ]
            }

Пока, все что пробовал, дает реакцию на клик по любой кнопке.

9 years ago

tadatuta

Обычно кнопка, помимо того, что она является универсальным блоком button, миксуется еще с элементом своего родителя. Если нафантазировать, что перед нами некая поисковая форма, которая позволяет поискать по сайту (с помощью button_type_submit) и по всему интернету с помощью первой кнопки, то родитель будет называться search-form, а сама кнопка search-form__internet. Тогда нужный код получится примерно такой:

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

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                Button.on(this.elem('internet'), 'click', function(e) {
                    e.target // ссылка на кликнутую кнопку
                    this // ссылка на search-form, с помощью которой можно будет обратиться и к вложенному в форму инпуту, если потребуется
                }, this);
            }
        }
    }
}));

});

этот же код можно переписать и на отложенную инициализацию:

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

provide(BEMDOM.decl(this.name, {
    onInternetClick: function(e) {
        // ...
    }
}, {
    live: function() {
        this.liveBindTo('internet', 'click', this.prototype.onInternetClick);
    }
}));

});

9 years ago

godfreyd

Спасибо @tadatuta, но во втором примере метод liveBindTo должен запускать callback при повторяющихся кликах. Но этого не происходит.Один раз отрабатывает и все. Первый вариант, работает хорошо.

9 years ago

godfreyd

вот мой код по второму примеру (с ленивой инициализацией).

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

provide(BEMDOM.decl(this.name, {
onCountryClick: function(e) {
    var modal = this.findBlockInside('modal');
    modal.setMod('visible', true);
}
    }, {
         live: function() {
    this.liveBindTo('country', 'click', this.prototype.onCountryClick);
         }
    }));

});

9 years ago

tadatuta

@Sergei-b84 причина в том, что modal в момент первого использования переносится к </body>, чтобы не было проблем с { overflow: hidden } на родителе и т.п., так что в следующий раз findBlockInside() ее не находит.

Решается это простым кэшированием найденного modal (оно и в принципе правильно — ни к чему лишний раз по DOM искать):

onCountryClick: function() {
    this._modal || (this._modal = this.findBlockInside('modal'));
    this._modal.setMod('visible', true);
}

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