Не срабатывает повторно popup

Форум /

При первом клике на кнопку, и если input пустой, то вызывается popuv рядом с input с текстом о том, что он не заполнен, но при повторной клике, popuv уже не вызывается и идут ошибки, такого рода: Uncaught TypeError: Cannot read property 'setAnchor' of null

js код:

modules.define(
    'auth',
    ['i-bem__dom', 'jquery', 'location', 'querystring'],
    function(provide, BEMDOM, $, location, qs) {

        provide(BEMDOM.decl(this.name, {
            onSetMod : {
                'js' : {
                    'inited' : function() {
                        this.__base.apply(this, arguments);
                        var _this = this;

                        this._input = this.findBlocksInside('input');

                        this.bindTo('submit', function(e) {
                            e.preventDefault();
                            _this._onSendAuth(e);
                        });
                    }
                }
            },

            _onSendAuth: function(e) {
                if (!/^([A-z0-9]{3,25})$/i.test(this._input[0].getVal())) {
                    this._dropdown = this._input[0].findBlockInside('popup');
                    this._dropdown.setAnchor(this._input[0]);
                    this._dropdown.toggleMod('visible', true);
                }
            }
        }));
    }
);

html:

<form class="auth i-bem" action="/login/auth" method="POST" data-bem="{&quot;auth&quot;:{&quot;csrf&quot;:&quot;&quot;}}">
    <div class="page-unit__login">
        <span class="input input_theme_islands input_size_m input_width_available i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Логин"/></span>
            <div class="popup popup_target_anchor popup_autoclosable popup_theme_islands i-bem" aria-hidden="true" data-bem="{&quot;popup&quot;:{&quot;directions&quot;:[&quot;right-center&quot;]}}">Заполните поле</div>
        </span>
    </div>
    <div class="page-unit__login">
        <span class="input input_theme_islands input_size_m input_width_available i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" type="password" placeholder="Пароль"/></span>
            <div class="popup popup_target_anchor popup_autoclosable popup_theme_islands i-bem" aria-hidden="true" data-bem="{&quot;popup&quot;:{&quot;directions&quot;:[&quot;right-center&quot;]}}">Заполните поле</div>
        </span>
    </div>
    <button class="button button_theme_islands button_size_m button_block_full button_type_submit button_view_action button__control i-bem" role="button" type="submit" data-bem="{&quot;button&quot;:{}}"><span class="button__text">Войти</span></button>
</form>

8 years ago

tadatuta

Дело в том, что popup при появлении переносит свой узел в самый низ DOM-дерева, к </body>, чтобы гарантировать правильную работу в том числе в случае, если якорь находится внутри контейнера с overflow: hidden. Чтобы решить проблему, достаточно сохранить ссылку на попап на onSetMod -> js -> inited и в дальнейшем использовать ее:

this._popup = this.findBlockInside('popup');

И немного оффтопика:

Если блок наследуется только от i-bem__dom, то звать this.__base.apply(this, arguments); нет необходимости.
Вместо bindTo можно подписываться через liveBindTo — это экономит ресурсы.
В коллбеке bindTo сохраняется контекст, так что запоминать this в отдельную переменную нет необходимости.
Большинство сеттеров из официальных БЭМ-библиотек поддерживают чейнинг, так что можно писать цепочки вида:

this._popup
    .setAnchor(this._input[0])
    .toggleMod('visible'); // здесь не обязательно явно писать вторым аргументом `true`

8 years ago

Index1

@tadatuta Благодарю за помощь, очень выручили, но вот проблема сразу же, если мы нажали на кнопку - Войти и поле Логин не заполнено, то выведет ошибку, всё гуд, но когда мы заполним его и снова нажмём на кнопку Войти, а поле пароль у нас не заполнено, то текст с ошибкой почему то унаследовался от первого input

P.S разобрался, вместо findBlockInside() заменил на findBlocksInside() и уже выбирал из массива, какой popup нужен

8 years ago

o5e2e2

Вместо bindTo можно подписываться через liveBindTo — это экономит ресурсы.

Как лучше писать в моем случае:

this.bindTo(this._selectBlock.elem('country'), 'click', this.onSelectCountry);
this.bindTo(this._selectedBlock.elem('countries-wrapper'), 'click', this.onUnselectCountry);

1) 200 элементов создаётся при ините _selectBlock, потом элементы скрываются стилем, но не удаляются.

2) код создающий элементы (их будет 0 - 5, редко больше):

        BEMDOM.append(this.elem('countries-wrapper').get(0), BEMHTML.apply(countryBemjson));
        var domElem = this.elem('countries-wrapper').get(0).lastElementChild;
        this._countryElems[domElem.innerText] = this.elemify(domElem);

код удаляющий страну:

        BEMDOM.destruct(this._countryElems[country]);
        delete this._countryElems[country];

8 years ago

tadatuta

@o5e2e2 мало что могу сказать по приведенному коду, но liveBindTo умеет подписываться в контексте переданного элемента, а про остальное я вообще ничего не понял (но если речь о том, что приведенный кусок кода дергается в цикле, то это точно не ок).

8 years ago

o5e2e2

циклов нет. вопрос про this.bindTo на this._selectBlock.elem('country') из 200 элементов это ок?

8 years ago

tadatuta

Это примерно в 200 раз менее эффективно, чем делегированный liveBindTo ;)

8 years ago

o5e2e2

Блок хозяин слушает событие click элементов своего блока-элемента. Когда создаются 200 элементов в рамках обычного создания подчиненного блока, о желании хозяина слушать элементы ему неизвестно. Как тут можно применить делегированный liveBindTo?

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