Сборка i-bem.js

Форум /

Приветствую, друзья! Хочу собрать i-bem.js из bem-core, чтобы использовать его на проекте без полного БЭМ-стека. И я собрал его, но что то не фурычит он. Видимо я что-то не правильно делаю. Подтолкните в нужном направлении. Вот мой порядок действий:

Склонировал bem-core
Выполнил npm i
В директорииcommon.bundles\index создал файл index.bemjson.js с таким содержимым:

({
    block: 'i-bem',
    elem: 'dom'
});

Выполнил команду `bem make
Получил собранный файл i-bem.js
Подключаю его на страницу. Вот исходный код этой страницы:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src='i-bem.js' type="text/javascript"></script>
    <script src='index.js' type="text/javascript"></script>
</head>
<body>
    <div class="b-calendar i-bem" data-bem="{'b-calendar:{}'}"></div>
</body>
</html>

В index.js я написал такой код:

modules.define('i-bem__dom', function(provide, DOM) {
    DOM.decl('b-calendar', {
        onSetMod: {
            'js' : {
                'inited' : function() {
                    console.log('inited');
                }
            }
        }
    });
    provide(DOM);
});

В итоге после открытия страницы в консоль ничего не выводится... Что не так в моих действиях?

10 years ago

Guria

мне кажется ваш i-bem не в курсе, что надо инициировать блоки. см. https://github.com/bem/bem-core/blob/v2/common.blocks/page/page.deps.js#L4

10 years ago

kuflash

@Guria, сделал так:

({
    block: 'i-bem',
    elem: 'dom',
    mods : { init : 'auto' }
});

Скомпилировал и все равно не работает. Вот какой файл у меня собирается: https://www.dropbox.com/s/y32gbe4xce33jci/i-bem.js?dl=0

10 years ago

Guria

@kuflash Хм. не хватает только содержимого i-bem__dom_init_auto.js Добавь в index.js:

/**
 * Auto initialization on DOM ready
 */

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

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

});

10 years ago

zverbeta

Для блока же нужно написать js:true

10 years ago

Guria

@zverbeta Если для блока был инициализирован клиентский JS, BEMHTML добавляет в список HTML-классов i-bem, а также атрибут со значением параметров клиентского JS (по умолчанию — data-bem, см. мода jsAttr) см в коде <div class="b-calendar i-bem" data-bem="{'b-calendar:{}'}"></div>

10 years ago

kuflash

@Guria, добавил. Теперь на странице вылетает ошибка: Uncaught SyntaxError: Unexpected token ' Ошибка пропадает, если закоментировать строку: nextTick(init); Вот мой сходный код index.js:

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

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

});

modules.define('i-bem__dom', function(provide, DOM) {

    DOM.decl('b-calendar', {
        onSetMod: {
            'js' : {
                'inited' : function() {
                    console.log('inited');
                }
            }
        }
    });

    provide(DOM);

});

10 years ago

tadatuta

@kuflash Ошибка кроется в HTML-разметке — значение data-bem должно быть валидным JSON-ом, т.е. необходимо использовать двойные кавычки для ключей: { "b-calendar": {} }.

Еще сразу порекомендую использовать новый способ декларации блоков:

modules.define('b-calendar', ['i-bem__dom'], function(provide, BEMDOM) {
    provide(BEMDOM.decl(this.name, {
        onSetMod: {
            js: {
                inited: function() {
                    console.log('inited');
                }
            }
        }
    });
});

PS: Странно, что приходится вставлять i-bem__dom_init_auto руками, он должен был собраться по декларации сам. Возможно, не пересобралось просто?

10 years ago

Guria

@tadatuta я пробовал воспроизвести, у меня даже i-bem__dom_init не собрался

10 years ago

kuflash

@tadatuta, заработало. Спасибо большое. По поводу i-bem__dom_init_auto, не знаю, пересобирал несколько раз, удаляя все созданные файлы. этот кусок не вставляется почему то.

10 years ago

Guria

@tadatuta у меня собралось наконец-то с i-bem__dom_init_auto дропал cache enb и перезапускал его, но собралось только когда я другой бандл в браузере загрузил

10 years ago

qfox

@tadatuta А не думали пытаться распарсить, если там { в начале?

10 years ago

tadatuta

@zxqfox

А не думали пытаться распарсить, если там { в начале?

Раскрой мысль, пожалуйста.

10 years ago

apsavin

@tadatuta Леша, видимо, имел в виду "не пробовали пытаться парсить невалидный json из data-атрибутов"? Думаю, не ошибусь, если скажу, что не пробовали и не собираетесь.

10 years ago

tadatuta

У меня про это есть вот такие ссылки: https://github.com/bem/bem-core/issues/250 https://github.com/bem/bem-core/pull/742

10 years ago

qfox

@apsavin :+1: вот так угадываешь! ;-)

@tadatuta Ну так это как раз про attr='{"valid":"json","inside":"attr"}'. А я про attr="{invalid:'json'}" — может быть примочку к i-bem для чтения data-bem в теории можно сделать.

upd Есть такая теория, как нужно асфальтировать тропинки для людей. Где протоптано — там и асфальтировать. У людей есть привычки, они плохие, они им мешают, но они еще не готовы от них избавляться — а методология их насильно в правильное русло с головой. Вот и боятся многие, что придется спортом заниматься и в 6 утра на завод. По грязюке, как привыкли, после ночного дождя.

10 years ago

veged

@zxqfox такая примочка либо внутри будет eval делать (что XSS-ами всякими пахнет), либо будет монстроидальной и тормозной (если кастомный парсер писать)

upd не понятно, почему по грязюке, если если есть асфальт — а спорт это хорошо!

10 years ago

qfox

@veged Ну жили же с onclick="return " ? el=$('elem'); el.attr('onclick', 'return' + el.attr('data-bem')); el[0].onclick voila! ;-) согласен, что без этого жить можно и главное — спокойнее спать по ночам будет.

А по грязюке — короче. Не зря ж сказки про короткую тропинку через темный лес рассказывают ;-) Природа у людей такая ;-)

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