Очередной вопрос по инициализации...

Вопрос №1

modules.define('page',
  ['i-bem-dom'],
  function (provide, bemDom) {
    provide(bemDom.declBlock(this.name, {
      onSetMod: {
        'js': {
          'inited': function () {
            // this.findChildBlock(FormLogin)._events().on('login:success', this._onLoginSuccess)
          }
        }
      }
  }))
})

// modules.require('page', function () {})

инициализация происходит только если раскомментировать последнюю строчку. Это нормально или я что-то не так сделал?

Вопрос №2.

Блок page я планирую использовать как глобального диспетчера. У page есть разные view (со своими наборами слушателей). По сути будет 3 view. (login, user, admin),

При переходе из view в другой view нужно менять вешать/убирать слушателей. Как это реализовать?

Пока начал эксперементировать с модификаторами. Но такой код срабатывает только при инициализации.

modules.define('page',
  ['form-login'],
  function (provide, FormLogin, Page) {
    Page.declMod({ modName: 'view', modVal: 'login' }, {
      onSetMod: {
        'js': {
          'inited': function () {
            console.log('login view')
            // console.log(this.findChildBlock(FormLogin))
            this.findChildBlock(FormLogin)._events().on('login:success', this._onLoginSuccess)
          }
        }
      },

      _onLoginSuccess: function (e, data) {
        console.log(data)
      }
    })

    provide(Page)
  }
)

Вопрос №3

Какая разница между

provide(bemDom.declBlock())

и

bemDom.declBlock()
provide(bemDom)

8 years ago

tadatuta

Упс, прости, потерял этот пост :(

Вопрос №1: https://github.com/bem/bem-core/issues/1395

Вопрос №2: Если я правильно понял задачу, то тебе нужно использовать реакцию на изменение модификаторов:

modules.define('page', ['i-bem-dom'], function(provide, bemDom) {

provide(bemDom.declBlock(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                var view = this.getMod('view');

                // sync view on load
                this['_on' + view[0].toUpperCase() + view.substr(1)]();
            }
        },
        view: {
            login: function() {
                this._onLogin();
            },
            user: function() {
                this._onUser();
            },
            admin: function() {
                this._onAdmin();
            }
        }
    },
    login: function() {},
    user: function() {},
    admin: function() {}
}));

});

Но вообще я бы добавил какой-нибудь дополнительный блок app, чтобы не завязываться на page (наверняка тебе понадобится шаблонизация на клиенте и нет никакого смысла тащить обвязку).

Вопрос №3: Разницы нет.

8 years ago

belozer

Но вообще я бы добавил какой-нибудь дополнительный блок app, чтобы не завязываться на page (наверняка тебе понадобится шаблонизация на клиенте и нет никакого смысла тащить обвязку).

Page планируется только для разбивки логики на разные scope (view), которые зависят от конкретного пользователя, какие у него права.

Вся основная работа будет в блоке content (app), который будет иметь различные обработчики страниц (content_handler_users, content_handler_settings и т.д.)

Вопрос №3: Разницы нет.

А вот и есть. Если в сделать

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

  provide(bemDom)
})

modules.require('page', function () {})

а в потом пытаться задекларировать модификатор

modules.define('page',
  ['form-login', 'store', 'redux-watcher', 'router'],
function (provide, FormLogin, store, ReduxWatcher, Router, Page) {
  provide(Page.declMod({ modName: 'view', modVal: 'login' }, {
    // ...
  }))
})

Словим ошибку: Page.declMod is not a function

Но а если писать сразу в провайдер provide(bemDom.declBlock()), то всё норм.

// cc @tadatuta

8 years ago

tadatuta

Да, ты прав. Разницы не было до v4. Теперь declBlock возвращает класс блока и его и требуется запровайдить. Так что валидным вариантом унести provide на отдельную строку будет:

modules.define('page', ['i-bem-dom'], function(provide, bemDom) {

var Page = bemDom.declBlock(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                console.log('inited');
            }
        }
    }
});

provide(Page);

});

7 years ago

belozer

Возник вопрос по инициализации блока :) Очередной.

Атрибут data-bem (имя блока) не обязательный, если у блока ленивая инициализация? Я всегда думал, что он обязателен, но примиксованный блок (animation) инициализируется и без него.

<div class="object-page-editing 
            object-page__editing 
            animation 
            i-bem 
            object-page-editing_js_inited 
            animation_js_inited 
           " 
     data-bem="{&quot;object-page-editing&quot;:{}}">
</div>

Доступ к инстансу анимации получаю так:

this._editing = this.findChildBlock(Editing);
this._animationEditing = this._editing.findMixedBlock(Animation);

Что нужно минимум в html для того, чтобы получить инстанс примиксованного блока с ленивой инициализацией?

А то в голове какая-то смута сейчас.

//cc @veged @tadatuta

7 years ago

veged

если делается явный поиск/получение блока, то он инициализируется даже при отсутствии параметров

но если явного поиска/получения нет, то без параметров не вызовется даже ленивая инициализация (т. к. изначально блоки ищутся в доме по data-bem

7 years ago

belozer

если делается явный поиск/получение блока, то он инициализируется даже при отсутствии параметров

т.е. даже i-bem класс не нужен? Самый минимум - это класс блока на ноде. Я правильно понял?

7 years ago

veged

только если делаетс явное обращение, тогда не нужен

НО,я бы не рекомендовал закладываться на это поведение, это скорее недокументированная особенность текущей реализации — лучше считать, что и i-bem и data-bem нужны всегда для блоков у которых есть js технология

7 years ago

belozer

@veged ок, спасибо. А то у меня путаница в голове возникла, когда заметил это :snowboarder:

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