bem-site / bem-forum-content-ru

Content BEM forum for Russian speak users
MIT License
56 stars 6 forks source link

Как правильно найти блок? #1263

Open Index1 opened 7 years ago

Index1 commented 7 years ago

Не могу понять, как правильно найти блок content.

Имеется div:

<body>
 <div class="content i-bem content_js_inited" data-bem="{&quot;content&quot;:{}}"><div class="content__wrap"></div></div>
<div class="modal modal_theme_islands modal_has-close popup i-bem modal_js_inited popup_js_inited modal_has-animation" data-bem="{&quot;modal&quot;:{},&quot;popup&quot;:{&quot;zIndexGroupLevel&quot;:20}}" role="dialog" style="z-index: 21001;" aria-hidden="true"><div class="modal__table"><div class="modal__cell"><div class="modal__content"><div class="info_modal info_modal_size_s"><div class="info_modal__content">Пароль неверный</div><div class="modal_button modal__close"><button class="button button_theme_islands button_type_app app i-bem app_js_inited button_js_inited" data-bem="{&quot;button&quot;:{},&quot;app&quot;:{&quot;controller&quot;:&quot;zfclogin&quot;,&quot;action&quot;:&quot;auth&quot;}}" role="button"><span class="button__text">Ок</span></button></div></div></div></div></div></div>
</body>

То есть, у нас вызвалось модальное окно, в нём есть метод: modal_has-close и внутри модалки, есть кнопка - button, к которой примексован блок 'app'.

При нажатии, выполняется закрытие окна и по сути, выполняется метод app:

modules.define(
    'app',
    ['i-bem__dom', 'location', 'jquery', 'control', 'CryptoJSAes'],

    function(provide, BEMDOM, location, $, Control, CryptoJSAes) {

        provide(BEMDOM.decl({ block : this.name, baseBlock : Control }, {
            onSetMod: {
                'js' : {
                    'inited' : function() {
                        this._content = this.findBlockOutside('content');
                        this.bindTo('pointerclick', this._onAppLoad);
                    }
                }
            },

            _onAppLoad: function() {
              this._content._onGetLoad({'loader' : true});
            },
        }));
    }
);

То есть, при клике на примексованный app к кнопке, выполняется функция _onAppLoad. В inited ищеться блок 'content' и выполняется функция _onGetLoad. findBlockOutside, не выполниться, в сферу того, что 'content' изнутри блока app, но изнутри app у нас modal только. Идёт вопрос, как найти блок 'content' и выполнить исходя из найденного блока - функцию?

Index1 commented 7 years ago

Нашёл только 1 способ, это $('.content').bem('content'). Я так понимаю, инных способом нету?

tadatuta commented 7 years ago

Искать блоки вверх по дереву — в любом случае плохой паттерн.

Более надежная схема выглядит так: Предположим, что у нас такая разметка (максимально упрощенно):

<div class="parent">
    <div class="b1></div>
    <div class="b2></div>
</div>

И нам необходимо при каких-то действиях с b1 вызывать некий метод на `b2.

  1. В ответ на интересующие нас действия блок b1 эмитит событие.
  2. Блок-родитель подписывается на событие b1 и инициализируется при наступлении этого события. В момент своей инициализации находит внутри себя блок b2 и кеширует его, чтобы лишний раз не обращаться к DOM-дереву.
  3. При наступлении события из b1 вызывает необходимый метод блока b2.