Использование i-bem.js просто подключив его на страницу

Форум /

Приветствую всех! Дошел до изучения i-bem.js и сразу возник вопрос. Я хочу в проекте использовать только этот фреймворк, без остального стека технологий БЭМ. Задав данный вопрос у вас в чатике на Gitter я получил пару ссылок: https://github.com/tenorok/bemer и https://github.com/tenorok/get-i-bem, и вторая в начале меня привлекла, но я так и не смог понять как использовать данный вариант в моем случае. Вот html, который я написал:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="static/main.css"/>
    <script src="libs/jquery/dist/jquery.js"></script>
    <script src="libs/i-bem/i-bem.js"></script>
    <script src="common.blocks/b-button/b-button.js"></script>
</head>
<body>
    <button class="b-button i-bem">Click me!</button>
    <button class="b-button b-button_theme_ku i-bem">Click me!</button>
</body>
</html>

А это js:

BEM.DOM.decl('b-button', {
    onSetMod : {
        'js' : {
            'inited': function() {
                this.bindTo('click', function(e) {
                    console.log("Clicked!")
                });
            }
        }
    }
});

Но ничего не работает. Клик не обрабатывается. Возможно я куда-то не туда думаю. Направьте меня, пожалуйста :) Или просто использовать i-bem.js, подключив его на страницу невозможно?

9 years ago

tadatuta

Возможно, конечно.

БЭМ предполагает возможность миксов — нескольких блоков на одной DOM-ноде. А значит нужен способ как-то сказать, какой из блоков на данной ноде нужно инициализировать. Кроме того, i-bem.js позволяет передавать параметры в инстанс блока через разметку. Для этих целей используется атрибут data-bem. Подробнее см. Привязка JS-блоков к HTML.

В данном случае результат будет выглядеть так:

<button class="b-button i-bem" data-bem="{&quot;b-button&quot;:{}}">Click me!</button>

Существует ряд проектов, которые инициализируются не в момент загрузки страницы, а при наступлении какого-то события. Поэтому автоматическая инициализация вынесена в отдельный модификатор и в данном случае ее нужно дернуть вручную:

BEM.DOM.init($('body'));

9 years ago

tadatuta

Игорь, а какие причины не использовать сборку? Возможно, мы придумаем, как их обойти.

9 years ago

ilyar

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

@tadatuta Могу сказать про себя, бывает очень сложно изменить сборку когда это надо или понимаешь что для того что бы изменить так как хочешь надо изобрести велосипед, или не хочешь видеть нагенерированные переходные файлы, а нет придется их терпеть.

9 years ago

voischev

А я поделюсь про скорость просто верстки html и верстки в простом project-stub так вот по ощущениям как минимум не разницы, максимум есть много положительного — все пожато, есть крутые компоненты из bem-components если нужно верстать формы, i-bem.js, фриз статики, и более удобный bemjson и bemhtml по сравнению с html. Плагины jq очень просто заворачиваться в ym если это проблема

Ну кажется достаточно нахвалил :) Плюс чем больше ты делаешь страниц, тем выше твоя скорость разработки. В общем это мои ощущения

9 years ago

tavriaforever

@kuflash Отпишись получилось ли, если нет, мы все еще готовы помочь)

9 years ago

kuflash

@tadatuta спасибо огромное! Получилось завести :) Сборку желание есть использовать, но пока не получается перестроить мозг для понимания конфигурации bem-tools. Я использую grunt/gulp и там все понятно. Наверное надо просто повнимательнее почитать доки про bem-tools.

@voischev я бы и рад использовать bemhtml, но на бэкенде java. А прослойку с nodejs для сборки делать не будут. Соответственно смысла писать на bemhtml, чтобы потом все равно руками резать на нужные шаблоны для java не вижу. А так, как будет возможность, то конечно попробую и bemhtml на вкус :)

9 years ago

tadatuta

@kuflash предложу вот такой вариант:

git clone https://github.com/tadatuta/bem-project-stub-he.git
cd bem-project-stub-he
npm i
node_modules/.bin/bem server

В браузере открыть http://localhost:8080/desktop.bundles/index/index.html

Дальше можно редактировать HTML в desktop.bundles/index/index.html, создавать новые блоки с CSS и JS в desktop.blocks/ и, если они упомянуты в html, то будут автоматически попадать в сборку.

9 years ago

voischev

@tadatuta +1

9 years ago

kuflash

@tadatuta благодарю! Но все таки я попробую сам поковырять конфиги bem-tools. А может и enb. Не люблю, когда не понятно как это работает все. Хочу по немногу, но сам руками дописывать конфиги, тогда и разберусь со всем этим делом. Собственно, как это у меня было с grunt/gulp.

9 years ago

belozer

Интересует способ, а точнее нужен совет. Хочу вынести i-bem (dom, events, pointer) в отдельную папку.

Немного не прижился bem-stub в команде. Поэтому хочется попробовать сделать свою "облегчённую" сборку для нашего текущего процесса.

Лучше i-bem для работы с bem я ничего не встречал. Хочется вынести со всеми нужными модулями для дальнейшего применения в проекте/проектах.

Для этого достаточно вытащить его из bem-core? Или есть подводные камни?

9 years ago

qfox

Для этого достаточно собрать bemjson.js с [{ block: 'i-bem' }] и всеми остальными, которые нужны.

Подводные камни, конечно, есть, но не касаются самого i-bem — все, что ему нужно, попадет в сборку. Если вам самим чего-то будет не хватать — надо будет дописать туда нужное и пересобрать.

Важно понимать, что дополнительно приедет модульная система. Если она не нужна — то это один из подводных камней.

9 years ago

belozer

@zxqfox да ) Возможно действительно так будет прощё.

9 years ago

belozer

@tadatuta @zxqfox

В общем не пойму в чём дело.

Собрал i-bem по следующему bemjson

([
{
    block: 'i-bem',
    content: [
        { elem: 'dom' }
    ]
},
{ block: 'jquery', elem: 'event', mods: { type: 'pointer' } },
{ block: 'events', elem: 'channels' }
])

Блок на странице не инициируется, хотя в склеенном js файле (полученный i-bem + код блока) присутствует.

9 years ago

qfox

Проверь наличие i-bem__dom_init_auto.

Проверь html:

<div class="i-bem blockname" data-bem='{"blockname":{}}'></div>

9 years ago

belozer

Всё есть. Если использовать код, собранный через bemjson для блока - то всё работает. А при той схеме, которую хочу реализовать - нет.

9 years ago

qfox

Может быть порядок?

9 years ago

belozer

подключение блока происходит после собранного i-bem

9 years ago

qfox

Ну да, видимо дело в этом.

Попробуй в консольке.

modules.require('i-bem__dom', function (BEMDOM) {
    BEMDOM.init(); // кажется
});

Если заработает — надо менять порядок через депсы (пытаться).

9 years ago

belozer

в рабочей сборке БЭМа нашёл такой кусок кода

/**
 * Auto initialization on DOM ready
 */
modules.require(
    ['i-bem__dom_init', 'jquery', 'next-tick'],
    function(init, $, nextTick) {

$(function() {
    nextTick(init);
});

});

но при добавлении данного кода возникает ошибка в next-tick модуле

9 years ago

qfox

Ну я спрашивал про i-bem__dom_init_auto ;-) Это оно и есть.

~~next-tick у тебя в сборке, видимо, отсутствует.~~

Ой. А покажи ошибку?

9 years ago

belozer

присутствует

9 years ago

belozer

в этой части ругается


var global = this.global,
    fns = [],
    enqueueFn = function(fn) {
        return fns.push(fn) === 1;
    },
    callFns = function() {
        var fnsToCall = fns, i = 0, len = fns.length;
        fns = [];
        while(i < len) {
            fnsToCall[i++]();
        }
    };

на строку

 fnsToCall[i++]();

9 years ago

belozer

Uncaught TypeError: undefined is not a function

9 years ago

belozer

А вот модуля "i-bem__dom_init" я у себя в сборке не нашёл

9 years ago

belozer

Всё. Заработало :) Не хватало именно его

9 years ago

qfox

угу, только хотел сказать, что

$(function() {
    nextTick(init); // init пустой
});

Непонятно, правда, почему оно отрезолвилось пустышкой.

/cc @tadatuta

9 years ago

belozer

Что-то не получается сделать сборщик i-bem.

Можете подсказать способ с более "правильным" подключения блоков? Или как модифицировать данный. Вручную собирать "движок" не очень удобно.

([

{
    block: 'i-bem',
    content: [
        { elem: 'dom' },
        { elem: 'dom', mods: { init: true }},
    ]
},
{
    block: 'jquery',
    elem: 'event',
    mods: { type: 'pointer' }
},
{
    block: 'events',
    elem: 'channels'
}

])

upd

Заметил что Chrome не всегда отрабатывает второй js файл.

Т.е. у меня есть один общий, для всех страниц. И для разных страниц есть свои блоки. Не всегда второй скрипт (набор блоков) отрабатывает. Работает только после перезагрузки.

Кто-то решал данную проблему подключения js?

9 years ago

belozer

Заметил, что если подключить в конце ещё файл с содержанием инициализации, то всё заработает.

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

provide(
    /**
     * Initializes blocks on a fragment of the DOM tree
     * @exports
     * @param {jQuery} [ctx=scope] Root DOM node
     * @returns {jQuery} ctx Initialization context
     */
    function(ctx) {
        return BEMDOM.init(ctx);
    });
});

modules.require(
    ['i-bem__dom_init', 'jquery', 'next-tick'],
    function(init, $, nextTick) {

$(function() {
    nextTick(init);
});

});

но как-то не очень это выглядит... Ещё один js для "зажигания". В html если его подключать, то выдает ошибку, ругаясь на modules, мол не определён.

9 years ago

belozer

Общее решение выглядит так

Подключаем i-bem с набором глобальных блоков
Подключаем наш набор блоков для конкретной страницы
Подключаем наш стартер

А вот и сам стартер

modules.require(
    ['i-bem__dom_init', 'jquery', 'next-tick'],
    function(init, $, nextTick) {

$(function() {
    nextTick(init);
});

});

9 years ago

qfox

@belozyorcev Пытаюсь вникнуть в проблему, а ты её решил уже? ;)

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