Войти с помощью github

Всем привет и доброго дня! Читаю документацию и пробую поймать элементарное событие с потомка. Получается чуть менее, чем никак(((

Делаю так:

Кусок bemjson

{
    block : 'test',
    js : true,
    content : {
        block : 'test2',
        js : true,
        content : 'test2 content'
    }
}

Модули:

modules.define('test', ['i-bem__dom', 'test2'], function(provide, BEMDOM, test2) {
    BEMDOM.decl('test', {
        onSetMod : {
            'js': {
                'inited' : function() {
                    test2.on(this.domElem, 'click', this._onClick);
                }
            }
        },
        _onClick : function(e) {
            console.log('hi test');
        }
    });

    provide(BEMDOM);
});

modules.define('test2', ['i-bem__dom'], function(provide, BEMDOM) {
    BEMDOM.decl('test2', {
        onSetMod : {
            'js' : {
                'inited': function() {
                    this.bindTo('click', this._onClick);
                }
            }
        },
        _onClick : function(e) {
            this.emit('click');
            console.log('hi test2');
        }
    });

    provide(BEMDOM);
});

Депсы

test2.deps.js

[{
    mustDeps : [
        { block : 'i-bem', elem : 'dom' },
        { block : 'test2' }
    ]
}]

test.deps.js

[{
    mustDeps : [
        { block : 'i-bem', elem : 'dom' }
    ]
}]

Блоки инциализируются. Ошибок нет. При клике на блоке test2 в консоль падает только 'hi test2'.

Второе. Пробовал через this.findBlockInside('child').on('click', this._onFilterClick, this) задействует только первый дочерний блок... Это правильное его поведение?

Третье. Что это за штука такая: BEMDOM.blocks['blockname'].on(......... Можно где по ней найти документацию? Она поддерживается?

Четвёртое. В коментах тут встречал, что есть ещё каналы. Почитал про них здесь: https://ru.bem.info/libs/bem-core/v2.8.0/desktop/events/#Элемент-channels-блока-events

Это вроде замены findBlockOutside(???).on() или можно использовать повсеместно? Или я вообще неправильно понял назначение каналов?

К сожалению не разбирал крайний i-bem, может он уже "умеет".

redux - такая штука которая работает с иммутабельным состоянием. В БЭМ модификтор - это состояние, а т.к. в большенстве своем это css, то и состояние модификатора не меняется.

А что если сделать timline как у redux для управления состояниями блоков aka модификаторами? А там и тему с состояниями развить до того, что заполнение данных в форму блока это тоже изменение состояния блока...

В основе каждой страницы сайта лежит блок page. Как можно дополнить этот блок, чтоб добавить для него дополнительные теги?

Интересует возможность добавить ряд статичных meta-тегов в head, прописать favicon (может быть еще что то). Идея в том, чтобы задать все это в одном месте, а не прописывать в bemjson-е каждого бандла. Подобные вещи реализуются в BEMHTML-шаблонах. Но блок page уже имеет свой шаблон и нужно как то его дополнить, но при этом не сломать. Хотелось бы пример подобной реализации.

Спасибо!

Создал проект веб-страницы (результат). Внутри использую свой слайдер, который находится в библиотеке, подключаемой через bower (https://github.com/Oopscurity/oopsy). измененный make.js

При сборке и запуске страницы в консоли браузера получаю следующее сообщение: Uncaught Error: Module "image": can't resolve dependence "lightbox"

На странице как image с js: true, так и lightbox не используются. Помогает (и это понятно) комментирование image.js в коде установленной библиотеки.

Демо: работа слайдера, лайтбокса. Все собирается и работает без нареканий.

Помогите, пожалуйста, разобраться, в чем проблема.

Может быть уже давно пора отказаться от прописывания this.un для каждого on? Просто заносить в реестр каждый on И в деструкторе анбайндить.

modules.define('test', ['i-bem__dom', 'BEMHTML'], function (provide, BEMDOM, BEMHTML) {
    provide(BEMDOM.decl(this.name, {
        onSetMod: {
            js: {
                inited: function () {
                    console.log(BEMHTML.apply({block: 'foo'}));
                }
            }
        }
    }));
});

Функция BEMHTML.apply генерирует HTML-элементы по BEMJSON-декларации в соответствии с правилами именования БЭМ.

в консоли ожидаю что-нибудь типа <div class="foo"></div> Но там ничего, пустая строка. Как это работает?

Пробую на https://github.com/bem/project-stub.git --depth 1 --branch v1.5.0 my-bem-project

Стандартная инициализация блока i-bem понятна, есть желание реализовать блок с авто инициализацией внутри, делаю так:

modules.define( 'myBlock', ['i-bem__dom', 'jquery', 'next-tick' ],
  function ( provide, BEMDOM, $, nextTick ) {
    BEMDOM.decl( this.name, {
      onSetMod: {
        js: {
          inited: function () { }
        }
      }
    } );

    provide(BEMDOM);

    $(function() {
      nextTick(BEMDOM.init('myBlock'));
    });
  }
);

Это не работает, подскажите куда посмотреть.

Хочу для этого особенного блока использовать простую разметку, вместо:

<div class="myBlock i-bem" data-bem="{&quot;myBlock&quot;: {}}">load...</div>

только так:

<div class="myBlock">load...</div>

Пробовал в списке зависимостей указывать link_animated - не вышло. Подобным образом — то же самое.

modules.define(
    'scroll-top',
    [ 'i-bem__dom', 'jquery' ],
    function(provide, BEMDOM, $) {
        provide(BEMDOM.decl({ block: this.name, baseBlock: { block: 'link', modName: 'animated', modVal: true } }, {
            // ...
        }));
    }
);

Возможно осуществить задуманное?

Ребята, посмотрите, пожалуйста код. Он рабочий, просто хочу получить feedback. Может есть явные ошибки. Спасибо.

    modules.define('pgc-create', ['i-bem__dom'], function(provide, BEMDOM) {
    provide(BEMDOM.decl(this.name, {
    onSetMod: {

        'js': {
            'inited': function() {
                this.bindTo(this.elem('prev'), 'click', this._onClick); // подписка на DOM-событие "click" по кнопке "Назад"
            }
        },

        step: function(modName, modVal) {
            this
                .delMod(this.elem('step'), 'active')
                .setMod(this.elem('step').eq(modVal - 1), 'active')
                .delMod(this.elem('number'), 'active')
                .setMod(this.elem('number').eq(modVal - 1), 'active')
                .delMod(this.elem('text'), 'active')
                .setMod(this.elem('text').eq(modVal - 1), 'active')
                .delMod(this.elem('arrowgrey'), 'active')
                .setMod(this.elem('arrowgrey').eq(modVal - 1), 'active')
                .delMod(this.elem('arrowwhite'), 'active')
                .setMod(this.elem('arrowwhite').eq(modVal - 1), 'active')
                .delMod(this.elem('fields'), 'visible')
                .setMod(this.elem('fields').eq(modVal -1), 'visible');

            modVal === '4' &&  this
            .delMod(this.elem('next'), 'visible') // прячем кнопку "Продолжить"
            .delMod(this.elem('submit'), 'hidden'); // показываем кнопку "Отправить"
            modVal > '1' && this.delMod(this.elem('prev'), 'hidden'); // на втором шаге показываем кнопку "Назад"
            modVal === '1' && this.setMod(this.elem('prev'), 'hidden'); // на первом шаге прячем кнопку "Назад"

        }
    },
    _onSubmit: function(e) { // Листаем вперед
        e.preventDefault();
        // TODO: валидация примерно здесь
        this.setMod('step', +this.getMod('step') + 1);
    },
    _onClick: function(e) {  // Листаем назад
        e.preventDefault();
        this.setMod('step', +this.getMod('step') - 1); 
    }
    }, {
    live: function() {

        this.liveBindTo('submit', this.prototype._onSubmit);

    }
    }));
    });

А не задумывались ли вы о самостоятельной i-bem.js? Так сказать лайт версия стека БЭМ. Очень часто встречаю файл scripts.js, main.js, с наиполнейшей лапшой из jquery плагинов, без ленивой инициализации и всех крутых штук которые умеет i-bem.js

Статическое свойство, к примеру, понятно, как сделать. А вот элемент — возможно ли?

Возможно ли сделать ленивую инициализацию блока по событию не на блоке а в канале?

Вопрос, который не дает мне покоя. Неужели никто из из тех кто разрабатывает на бэм не пользуется моделями на фронте? Как-то странно эта тема практически не всплывает... В связи с этим хотелось бы узнать использует ли кто-то mvc в своих проектах и каким образом. Или все же хотеть модели на фронте - неправильно? Буду благодарен за развернутый ответ.

Создал слайдер (блок slider) с поддержкой входных параметров (this.params) и слайд-шоу. При установке двух и более экземпляров на страницу, происходит (по-видимому) смешивание их параметров, или их переопределение. Перелистывание слайдов всегда производится с учетом ширины (width) и скорости перелистывания (duration) последнего экземпляра. То же касается величины задержки (delay) при слайд-шоу.

Помогите, пожалуйста, разобраться, в чем таится ошибка.

Ссылки:

Как прописать element.style {} к блоку?

Вопрос по bem-mvc. Можно ли сделать подписку на событие внутри модели. Хочу при фиксации модели вызывать еще один метод. И вдогонку еще вопрос. Почему в bem-mvc нельзя переопределять базовые методы модели, например fix()?

Есть модуль который провайдит скрипт (по аналогии с jQuery), Скрипт режется на некоторых клиентах (adblock). В итоге модуль не провайдится. А так как он прописан в зависимостях модуля унаследованного от i-bem__dom то блоки с DOM представлением тоже не инициализируются. Можно ли как-то учесть, что модуль может не зарезолвится, не мешая работе других блоков?

есть файл .browser.js в папке с элементом

modules.define('buttons__button', ['i-bem__dom'], function(provide, BEMDOM) {
provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                this.bindTo('click', function() { alert('hello'); });
            }
        }
    }
}));

})

js у элемента стоит в true, но событие не работает, что неправильно?

Планируется ли переход bem-core на нативные браузерные промисы? По сведениям caniuse уже 68% Браузеров имеют реализацию promise из коробки. Есть ли смысл использовать их, а если их нет, то в качестве полифила подключать vow?

Если есть причины почему не стоит так делать - хотелось бы услышать ваше мнение.

Привет всем. Планирую пилить проект на i-bem. Для него уже есть некоторые модели на backbone. Честно скажу, что о backbone слышал много хорошего но проекты не делал на нем. Кто в теме подскажите, насколько просто\сложно использовать backbone совместно с i-bem.js, что стоит учесть, как организовать связь...

Здравсвтуйте. Решил использовать bem совместно с webpack. Но возникла следующая проблема, может подскажете, как решить?: у каждого блока может быть много css тем, то есть имею вот такую структуру:

components/
    menu/
        menu.js
        themes/
            default/
                menu.scss
            dark/
                menu.scss
            light/
                menu.scss

css тема должна подгружаться динамически, то есть что-то вроде: содержимое menu.js файла:

require('./themes/' + currentTheme + '/menu.scss');

Но при таком подходе в webpack-е в бандл будут собраны все файлы всех css тем. Можно, конечно, использовать

require.ensure([], function() {
    require('./themes/' + currentTheme + '/menu.scss');
});

и тогда scss файл каждой темы будет помещен в отдельный бандл и будет подгружаться динамически. Но и в этом случае возникает проблема. Т.к. require.ensure выполняется асинхронно, то модуль menu.js отработает и разрезолвится и параллельно пойдет запрос за стилями блока, но сам блок и его верстка уже будут в DOM-е и пользователь увидит "голый" html, затем подгрузятся стили блока и верстка блока будет стилизована. Как это обойти? То есть как сделать, чтобы модуль menu.js не разрезолвился до тех пор, пока не резовленятся его зависимость, а именно css файл темы? Спасибо.

На предыдущих вебинарах мы говорили о декларативных возможностях CSS и BEMHTML, используемых в БЭМ. В этот раз — 16 декабря в 17:00 — мы расскажем и покажем, что декларативно можно писать не только стили и шаблоны, но и код на JavaScript — в том числе и для уровней переопределения. Применяется i-bem — специальный JavaScript-фреймворк для БЭМ.

Это вебинар для тех, кто уже немного знаком с БЭМ, знает HTML и CSS хотя бы на базовом уровне, понимает общие процессы веб-разработки и знаком с командной строкой. Также пригодятся знания, полученные на прошлых вебинарах. Для выполнения заданий понадобится терминал с установленными git и node.js.

Чтобы стать участником, пожалуйста, зарегистрируйтесь. Регистрация завершится 15 декабря в 16.00.

Обратите внимание, трансляция будет не на этой странице. За день до вебинара мы пришлём напоминание на электронную почту, указанную при регистрации, а за час до начала — индивидуальную ссылку на трансляцию.

Всем привет. Есть ли у кого-нибудь многоступенчатая форма регистрации , что-то наподобии http://azmind.com/demo/bootstrap-multi-step-registration-form/ Интересует, как связывали блоки между собой или делали все одним блоком?

Для работы было необходимо работать с методологией, но использовать i-bem не представлялось возможным, а костыли на jQuery было муторно и уже невозможно писать из-за громозкости. Использовать плагины для БЭМ к jQuery тоже было не самым радужным решением.

Решил сделать своё решение, с заимствованием API i-bem, но с небольшими изменениями.

Краткое описание API

.elem() - доступ к элементу .elem().elem() - доступ к элементу в элементе .setMod() - установка модификатора .delMod() - удаление модификатора .on() - надстройка над jQuery.on(). (но возможно будет заменён на bindTo) .$ - переход в режим jQuery.

репозиторий проекта

Новичек в БЕМ. В deps.js вроде прописал. CSS реализация блоков в зависимость попадает BH нет. В документации ответа не нашел.

https://github.com/trebushuk/choiser

Есть простой плагин прокрутки на Jquerry. )) Сейчас вот так в конце index.html:

<script src="js/plugins-scroll.js"></script>
<script>
    $(document).ready(function() {
        try {
            $.browserSelector();
            if($("html").hasClass("chrome")) {
                $.smoothScroll();
            }
         } catch(err) {
        };
    });
</script>

Как Это подключается через БЭМ? P/S: Спасибо!

Как правильно вызвать trigger и сказать, что произошло событие menuItemClick

     this.emit('menuItemClick', {
                    domElem : elem,
                    group: this.elemParams(elem).group
       });

если блоков menu на странице несколько, а событие нужно именно конкретного блока menu

В каком месте у меня ошибка? Что-то не хочет реагировать на событие клик

     modules.define('menu-country', ['i-bem__dom', 'jquery'], function(provide, BEMDOM, $) {

      provide(BEMDOM.decl(
        this.name,
        {
        onElemSetMod: {
        // Будем реагировать на изменение состояния элемента item
        'item': {
            // когда у него будет меняться модификатор state,
            'state': function (elem, modName, modVal) {
                // Когда мы получили состояние объекта, нам нужно оповестить другие блоки о том, что
                // произошло. Для этого мы вызываем trigger и говорим, что произошло событие Click,
                // заодно передаём важные параметры: элемент и его идентификатор метки.
                this.emit('click', {
                    domElem : elem,
                    group: this.elemParams(elem).group
                });
            }
        }
        },

        onTriggerElemClick: function (e) {
        e.preventDefault();
        var el = e.currentTarget;
        // Потом точечно включим у того, по которому нажали.
        this.toggleMod(el, 'state', 'active');
        }
    }, {
    live: function () {
        // Вешаем слушатель на клик.
        this.liveBindTo('item', 'click', function (e) {
            this.onTriggerElemClick(e);
        });

        this.on(this.domElem, 'click', function (e, data) {

            var activeState = this.buildSelector('item', 'state', 'active').substr(1);
            this.lastSelected && this.lastSelected.removeClass(activeState);
            this.lastSelected = data.domElem;
        });
    }
    }
    ));
    });

Есть у меня значит такая страктура:

blockA - подписывается как liveBindTo на change от инпута. Внутри по change эмитим событие change наверх. blockB - более высокоуровневый, работает с blockA. Делает this.liveInitOnBlockInsideEvent('change', 'blockA', function(e) { /* тут эмитим событие наверх this.emit('toggle'). Вот здесь я вылетаю каждый раз / }) blockC - еще более высокоуровневый. Работает с blockB. Делает this.liveInitOnBlockInsideEvent('toggle', 'blockB', function(e) { / И здесь тоже. */ })

По сути получается, когда я кликаю на чекбокс (blockA) и вот это вот все эмитит события на верх, оно пытается проинициализироваться на каждый следующий клик (change/toggle) хотя все блоки заинитились (blockA, blockB, blockC).

Пока залепил булевым локом на инстанс. Но ведь негоже.

Всем привет. Подскажите, пожалуйста, как правильно отреагировать на событие клик по первому блоку 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 : 'Поиск'
               }
                  ]
            }

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

Приветы!

Подскажите, я правильно понимаю, что нельзя наследоваться от блок с модификатором?

Пример:


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

    // Объявляем базовый блок
    provide(BEMDOM.decl(this.name, {})); 

});

modules.define('input', function(provide, Input) {

    // Доопределяем базовый блок с модификтором _type_number
    provide(Input.decl({ modName : 'type', modVal : 'number' }, {})); 

});

// Тут хочется отнаследоватьсяо о input_type_number, дописать/изменить метод
modules.define('input', ['input_type_number'] function(provide, Input) {

    provide(Input.decl({ modName : 'type', modVal : 'phone' }, {})); 

});