EN
freddylink
freddylink
24 июля 2017

Код бандла index.bemjson.js выглядит следующим образом:
index.bemjson.js

module.exports = {
    block: 'page',
    title: 'Title of the page',
    favicon: '/favicon.ico',
    head: [
        { elem: 'meta', attrs: { name: 'description', content: '' } },
        { elem: 'meta', attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' } },
        { elem: 'css', url: 'index.min.css' }
    ],
    scripts: [{ elem: 'js', url: 'index.min.js' }],
    mods: { theme: 'islands' },
    content: [
        {
            block: 'header',

        }
    ]
};

В блоке header, в файле header.deps.js я устанавливаю зависимость вида:

({

    shouldDeps: [
        {
            block: 'logo',
            mods: {theme: 'sea'}
        }
    ]
})

Соответственно блок лого существует, и у него прописаны стили.
Но при сборке проекта блок header не содержит никакой вложенности.
Соответственно вопрос: как добавить вложенность?
Или это так не должно работать, и в любом случае в index.bemjson.js должен быть явно прописан блок внутри блока?

sermonis
sermonis
24 июля 2017

Добрый день!

Подскажите, пожалуйста как правильно подключить скрипт по URL используя loader. Посмотрел для примера принцип подключения jQuery и сделал по аналогии, но скрипт не подключается. Не могу разобраться что я упустил.

dropzone.deps.js:

({
    mustDeps: [ 'i-bem-dom' ],
    shouldDeps: [
        { block: 'loader', mods : { type : 'js' } },
        { elem: 'config' },
        { mods: { theme: ['islands', 'default'], size: ['s', 'm', 'l', 'xl'], width: ['available'] } },
    ]
})

dropzone.bemhtml.js:

block('dropzone')(
    tag()('form'),
    attrs()({ action: '/post' }),
    addJs()(true)
);

dropzone__config.js:

/**
 * @module dropzone__config
 * @description Configuration for Dropzone
 */

modules.define('dropzone__config', function(provide) {

    provide(/** @exports */{

        /**
         * URL for loading Dropzone (http://www.dropzonejs.com)
         * @type {String}
         */
        url: 'https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/dropzone.js',
    });

});

dropzone.js:

/**
 * @module dropzone
 */
modules.define('dropzone', ['i-bem-dom', 'loader_type_js', 'dropzone__config'],

    function(provide, bemDom, loader, cfg)
    {
        const Dropdown = bemDom.declBlock(this.name, {

            /**
            * On modifier set
            * callback functions
            */
            onSetMod: {

                js: {

                    /**
                    * @param modName
                    * @param modVal
                    * @param currentModVal
                    */
                    inited() {

                        console.log('Dropzone - inited()');

                    }
                }
            },

        }, {
            lazyInit: false,

            onInit() {

                console.log('Dropzone - onInit()');
                return this.__base.apply(this, arguments);
            },

        });

        function doProvide(flag = 'defined')
        {
            console.log('Dropzone - doProvide(' + flag + ')');
            provide(Dropzone);
        }

        typeof Dropzone !== 'undefined' ? doProvide('undefined') : loader(cfg.url, doProvide);

    }
);

console.log:

Dropzone - doProvide(defined)
Dropzone - onInit()
Dropzone - inited()
belozer
belozer
13 марта 2015

Подскажите, как подкрутить перезагрузку страницы при редактировании блоков?

Если есть способ с enb, то с enb
Если есть gulp, то с gulp.

@verybigman что-то похожее реализовывал. Но так, как я понял, используется api сборщика bem, а не enb.

Может кто уже делал для себя конфиги?

rhlog
rhlog
8 июня 2017

как настроить сборку ?.node.js файдла галпом

lilliputten
lilliputten
9 мая 2017

Где-то видел пример линтинга, подключаемого в .enb/make.js, не могу найти. Ткните, пожалуйста?

Интересует пример предварительной статической проекта проверки перед сборкой (js, bemhtml, возможно, styl/css).

lilliputten
lilliputten
30 июня 2017

Существует ли (рассматривается ли) способ организации блоков в рамках одного уровня переопреледния?

Как пример можно рассматривать ситуацию, когда имеется некоторая (предположим) сущность "Report" и все имеющие к ней отношение блоки удобно было бы хранить в одной папке. Поначалу пытался для таких ситуаций использовать отдельные уровни (создаём уровень blocks/Report, в котором храним всё, имеющее отношение к "Report"), но это получается как-то вне концепции и вообще дичь.

Т.е.: возможна ли не плоская, а древовидная структура папок для блоков внутри уровня?

lilliputten
lilliputten
17 июля 2017

Необходимо назначить модификатор блоку menu, вложенному select (нужен код на экземпляре блока, связанный с модификатором). Пробую так:

block('select').mod('nicescroll', true)(
    block('menu')(
        addMods()(function(){
            return {
                nicescroll : true,
            };
        })
    ),
    // ...

Эффект нулевой.

Как?????????????

UPD: Ага. В bem-components так:

block('select').elem('menu')(
    replace()(function() {
        // ...

Т.е., наверное, могу ловить elem('menu') как-то. Щас попробую.

UPD-UPD: Ничего не придумал, кроме:

    block('select').mod('nicescroll', true).elem('menu').replace()(function(){
        var ctx = applyNext();
        ctx = ctx.replace(/\b(class="menu)\b/, '$1 menu_nicescroll');
        return ctx;
    }),

Но ведь это же неправильно!!!

Нет возможности перехватывать определение block('select').mod('nicescroll', true).block('menu') до рендеринга?

lilliputten
lilliputten
21 июля 2017

Запутался с асинхронным тестированием.

Делаю что-то вроде:

modules.define('spec', [ 'box', 'i-bem-dom', 'jquery', 'BEMHTML', 'events', 'sinon', 'chai' ],
  function(provide, Box, BEMDOM, $, BEMHTML, events, sinon, chai) {
    var expect = chai.expect;
    describe('box', function() {
        describe('vertical layout', function() {
            var box, emitter;
            beforeEach(function() {
                var
                    testLayout = { block : 'box', id : 'box',
                        // ...
                    },
                    html = BEMHTML.apply(testLayout),
                    dom = $(html).appendTo('body')
                ;
                box = BEMDOM.init(dom).bem(Box);
                emitter = box._events();
            });
            afterEach(function() {
                BEMDOM.destruct(box.domElem);
            });
            it('events', function(done) {
                this.timeout(3000);
                emitter.on('updatedOnInit', function(data){
                    console.log('updatedOnInit called');
                    // expect(true).toBe(true);
                    done();
                });
            });
        });
    });
    provide();
  }
);

В консоли вижу:

  1) box vertical layout events:
     timeout of 3000ms exceeded. Ensure the done() callback is being called in this test.

Причём, судя по всему, мой код начинает отрабатываться только после того, как тест завершает ожидание (по логам, по крайней мере, выходит так -- если они не кэшируются, конечно... Это возможно вооще?)

Что-то упустил?

+Вопрос вдогонку: как с помощью enb make specs ("enb-bem-specs": "^0.11.0") запускать не все, а отдельные тесты? Принимается что-то с командной строки?

UPD Разобрался (с помощью такой-то матери):

(1) Традиционная история с событями: подписка происходит после выкидывания события. Поменял на промисы. Сейчас всё тестируется в таком виде (фрагмент):

        it('initPromise result status should be equal updateChildSizes:done', function(done){
            box.initPromise
                .then(function(result){
                    result.status.should.be.equal('updateChildSizes:done');
                    done();
                })
                .fail(done)
            ;
        });

(2) Запуск отдельных тестов вполне логично оказался возможен с командой вида enb make specs blocks.specs/box.

(3) toBe вообще вытащил откуда-то из Jasmine. Это уже когда совсем перестал соображать, что происходит.

Темы закрываю, прошу прощения за спам.

bemdev
bemdev
20 июля 2017

Приветствую всех!

Помоги мне советом пожалуйста, как правильно при использовании bem-express мне использовать уровни при рендере для тач допустим?

Спасибо! Все будет bem :D

sancho2934489
sancho2934489
13 июля 2017

Здравствуйте. Пытаюсь собрать блок на основе ответа от сервера через модуль http. У блока в *.bemhtml.js выполняю запрос и заполняю блок на основе ответа в callback-функции. Но сборщик не дожидается ответа и строит html дальше. Естественно блок выходит пустой. Как быть в этом случае?

var http = require('http');

var options = {
    host: 'localhost',
    path: '/TESTindex.php'
};

callback = function(response) {
    var str = '';

    //another chunk of data has been recieved, so append it to `str`
    response.on('data', function (chunk) {
        str += chunk;
    });

    //the whole response has been recieved, so we just print it out here
    response.on('end', function () {
        var items = JSON.parse(str);
        var response = [];
        for (var i = 0;i < items.length;i++) {
            item = items[i];
            response[i] = {
                title: item
            };
        }
        console.log('resp', response);
        createBlock(response);

    });
};

var createBlock = function (items) {
    console.log('1',items);
    block('testmenu').elem('content')(
        content()(function() {
            console.log('1,5');
            this.ctx.items = items;
            console.log('2',this.ctx.items);
            return this.ctx.items.map(function(item) {
             console.log('3',item);
                return {
                    elem: 'item',
                    content: [
                        {
                            elem: 'title',
                            content: item.title
                        }
                    ]
                };
             });
        })
    );
};

createBlock([
    {
        title: 'Один'
    },
    {
        title: 'Два'
    },
    {
        title: 'Три'
    }

]); // Если выполнить этот вариант, то блок строится правильно

http.request(options, callback).end(); // Если выполнить этот вариант, то в консоль выводится только '1', [....] и на этом останавливается, и блок выходит пустой.
sermonis
sermonis
13 июля 2017

Добрый день!

Каскадные select'ы встречаются довольно часто в разных формах. Законченного решения мне найти не удалось, ни на форуме ни в документации. Помогите, пожалуйста разобраться на конкретном примере. Как реализовать каскадные блоки select в технологии js по следующему сценарию:

  1. Допустим, мы имеем 3 select-блока с модификатором disabled (до инициализации), например: country, city, street.

  2. После автоматической (domReady) инициализации, первый select-блок (country) выполняет обращение к API, получает данные в json-формате, заполняется пунктами, на основании полученного массива данных и в случае успеха, с первого блока снимается модификатор disabled.

  3. Выбираем пункт country, получаем значение выбранного пункта, формируем запрос к API, получаем ответ, заполняем пункты второго блока (city), снимаем модификатор disabled со второго блока.

  4. Выбираем пункт city, получаем значение выбранного пункта, формируем запрос к API, получаем ответ, заполняем пункты третьего блока (street), снимаем модификатор disabled со третьего блока.

  5. При изменении значения, для нижестоящих по иерархии (country - city - street) блоков, процедура повторяется.

Заранее спасибо!

sancho2934489
sancho2934489
19 июля 2017

Собрали проект на project-stub, с использованием bemjson и bemhtml . Теперь пытаюсь все это прицепить это к php через bh.php . Есть ли возможность на лету портировать bemhtml шаблоны в php, чтоб в дальнейшем использовать их у себя на сайте?

Degtyarev-vg
Degtyarev-vg
17 октября 2016

Приветствую, Уважаемые БЭМ-пользователи!
Возникла проблема с подключаемыми шрифтами, а точнее с путями при их использовании.
В папке common.blocks создал блок fonts/_face и тут складываю все шрифты (font_face_roboto.eot, .ttf, .woff и файл font_face_roboto.scss в котором прописываю правило font-family для модификатора .font_face_roboto). Затем миксую к нужному блоку/элементу mix: [{ block: 'font', mods: { face: 'roboto-regular' } }].
Всё бы отлично - в стили нужный шрифт подключается, но вот пути остаются относительно файла font_face_roboto.scss, который лежит папке common.blocks создал блок fonts/_face, а стили скомпилировались в папку desktop.bundles/index/index.min.css
Есть ли какие-либо способы решения данной проблемы? Чтобы пути автоматически менялись, либо нужные шрифты автоматически переносились в нужную папку. Поискав пути решения данной проблемы, так понял, что для этого есть borschik, но я использую сборку на gulp, возможно ли как-то настроить всё это дело? Спасибо!

oekintaro
oekintaro
18 марта 2016

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

Я подключил bem-components в проект dist-способом

<link rel="stylesheet" href="https://yastatic.net/bem-components/2.4.0/desktop/bem-components.css">
<script src="https://yastatic.net/bem-components/2.4.0/desktop/bem-components.js+bemhtml.js"></script>

Также у меня есть форма с несколькими select-блоками из bem-components, html которых скопировал со странички описания:

<form class='filter-form i-bem' data-bem='{ "filter-form": {} }'>
    <div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"city"}}'>
        ...
    </div>
    <div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"region"}}'>
        ...
    </div>
</form>

Мне нужно при изменении значения определенного select, а именно city, выполнить некоторые действия (если интересно, то нужно сделать post-ajax и выполнить submit формы).

Вроде надо что-то типа этого:

modules.define('filter-form', ['i-bem__dom'], function(provide, BEMDOM) {
    provide(BEMDOM.decl(this.name, {
        onSetMod: {
            js: {
                'inited': function() {
                    var sity_select = findBlockInside('cityselect');
                    city_select.on(this.domElem, 'change', this._onCityChanged, this);
                }
            }
        },
        _onCityChanged: function() {  ...  }
    }))
});

Как правильно указать событие и указать конкретный select?

bonjovi
bonjovi
15 июля 2017

Добрый день

Разрабатываю адаптивный сайт на флексбоксах на основе project stub

Подскажите, как лучше организовать css с медиа-запросами в структуре project stub?

Допустим у меня такая структура:
http://joxi.ru/eAOY9ZWsxZYgvm

Медиа-условия писать в этом же файле или создать отдельно какой-то другой?

По данному запросу найдены посты в архиве:
Перейти в архив

Сортировка

Метки