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

Добрый вечер

Пытаюсь вывести данные из JSON, как сказано здесь - https://ru.bem.info/forum/716/

Ничего не выходит, помогите найти ошибку

Вывожу вот так - http://joxi.ru/V2VL9x3SxLX34r

Выдаёт ошибку TypeError: Cannot read property 'apply' of undefined http://joxi.ru/1A5xBqGsnO6Nd2

В переменную BEMTREE почему-то ничего не приходит.

Проверил в вышеобозначенном файле page.bemtree.js через console.log() значения этих четырёх переменных:

  • PATH
  • pathToBundle
  • BEMTREE
  • BEMHTML

Все имеют значение, кроме BEMTREE имеющей undefined

Сборку свою текущую загрузил сюда - https://yadi.sk/d/6WCDVmYN3MqEBL

Добрый день

По умолчанию project stub стили для /desktop.bundles/index/index.bemjson.js ищет в папках /common.blocks и /desktop.blocks

Как сделать так, чтобы он искал например только в /desktop.blocks/index

Мне нужно чтобы стили для /desktop.bundles/index/index.bemjson.js искались в /desktop.blocks/index А для /desktop.bundles/index2/index2.bemjson.js искались в в /desktop.blocks/index2

Появилась необходимость принудительно сбрасывать кэш css, js бандлов на страницах. Смотрел в сторону добавления версий по типу: index.css?v=2 или index.css?v= new Date() Как лучше всего реализовать "версионность" бандлов для project-stub? В make.js? Или есть готовый инструмент-модуль для бэм-а в целом? Было бы не плохо увидеть пример этой реализации.

Добрый вечер

Использую project stub

Ранее всю разметку писал в index.bemjson.js, сейчас же решил оставить там основную разметку, а контент и шаблонизацию вынести для каждого блока в bemhtml/bemtree в common.blocks

И, вроде бы, всё почти сложилось, сами сущности расширяются, в итоговом html в браузере я вижу все блоки, которые должны были сформироваться. Но вот стили применились только к элементам, описанным в bemjson. А блоки, описанные через bemtree оказались проигнорированы в контексте css

Я вычистил из проекта лишнее и залил сюда - https://yadi.sk/d/NeU8Hc033MSDX2

Помогите плиз разобраться в чём дело, почему не применяются стили к topmenu__wrapper?

Добрый день Разрабатываю на project stub относительно большой проект (вёрстка):

  • несколько страниц
  • все страницы разные в контексте блоков, общие только шапка и подвал
  • на разных страницах свои особенные скрипты, которых нет на других страницах
  • разрабатывал страницы отдельно на отдельно взятых project stub заготовках
  • css блоков и bemhtml для каждой страницы клал в common.blocks

Теперь нужно всё это (все странички из разных project stub заготовок) собрать воедино, но пока не пойму как. Мне нужна примерно следующая картина в файловой структуре: common.blocks -- common ---- header ------ header.css ------ header.bemhtml.js ---- footer -- catalog ---- filter ---- heading -- index -- contacts desktop.bundles -- index -- catalog ---- catalog.html ---- catalog.bemjson.js ---- catalog.min.css ---- ... -- contacts

Как это реализовать? Где указать условия каким блокам со стилями из каких каталогов в какую страничку подгружаться? Потому что если я сейчас из разных заготовок стили солью в одну папку, у меня к каждой странице будут подгружаться все стили. Т.е. в contacts будет попадать что предназначалось для catalog и т.д.

Существует страница 'index' и блок 'post' c модификатором 'type' => 'one':

// index.bemjson.js
module.exports = {
    block: 'page',
    content: {
        block: 'post',
        mods: { type: 'one' },
        content: {
            ...
        }
    }

В папке desktop.blocks/post/ лежат файлы: post.bemhtml.js, post.bemjson.js, post.bh.php ...

В папке desktop.blocks/post/_type/ лежат файлы: post_type_one.bemhtml.js, post_type_one.bemjson.js, post_type_one.bh.php ...

При сборке проекта в бандле страницы появляется файл index.bh.php. Код:

// index.bh.php
// file: ../../desktop.blocks/post/post.bh.php
    $bh->match('post',function ($ctx) {
    ....

А необходимо, чтобы 'брался' шаблон desktop.blocks/post/_type/post_type_one.bh.php. Как enb-bh-php сообщить об этом?

Допустим есть блок menu с элементами menu__item. Как обернуть все menu__item в блок wrapper, используя bemhtml, чтобы не писать это в BEMJSON ручками.

Имеем:

    {
        block: 'menu',
        content: [
            { elem: 'item', content: 'item 1' },
            { elem: 'item', content: 'item 2' }
        ]
    }

Хотим:

    {
        block: 'menu',
        content: [
            {
                block: 'wrapper',
                content: [
                    {    block: 'menu', elem: 'item', content: 'item 1' },
                    { block: 'menu', elem: 'item', content: 'item 2' }
                ]
            }
        ]
    }

Такое возможно?

Есть страница: / index.bemjson.js /

module.exports = {
    block: 'page',
    ...
    content: [
        {
            block: 'menu',
            mods: {
                theme: 'islands',
                size: 'm',
                mode: 'radio'
            },
            content: [
                {
                    elem: 'item',
                    content: 'Отдых в горах'
                },
                {
                    elem: 'item',
                    content: 'Отдых на море'
                }
            ]
        }
    ]
};

После построения, появляется блок menu -> в нем элементы item, но у них нет uniq и не меняются модификаторы (checked, hovered), так же отсутствует класс i-bem, атрибут data-bem . Причем у блока menu появляется class i-bem, модификаторы, uniq и т.д. У кнопок так же все функционирует и работает, а вот menu__item не хочет работать. В либе ошибочка?(

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

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

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

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

Добрый день

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

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

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

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

Здравствуйте. Пытаюсь собрать блок на основе ответа от сервера через модуль 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', [....] и на этом останавливается, и блок выходит пустой.

Использую project-stub. Есть страница index(desktop.bundles). В ней подключаются блоки через конструкцию include:

var fs = require('fs'),
    path = require('path'),
    nodeEval = require('node-eval');

function include(filename) {
    return nodeEval(fs.readFileSync(filename, 'utf8'), filename);
}

module.exports = {
    block: 'page',
    head: [
        { elem: 'css', url: 'index.min.css' }
    ],
    scripts: [
        { elem: 'js', url: 'index.min.js' }
    ],
    content: [
        include('desktop.blocks/header/header.bemjson.js'),
    ]
};

Тем самым - это позволяет уйти от стандартного require, который кэширует содержимое. Но это не решает задачу в целом. Так как: Если изменить содержимое блока header и обновить страницу - изменения не подтянутся. Приходится вручную каждый раз делать любые изменения в самом index.bemjson.js (например добавив 1 таб), тогда блок header обновиться. Мое предположение: Сборщик считает, что файл index.bemjson.js не изменили и поэтому не пересобирает файл, а в блоках include ведь есть изменения. Возможно ли ему как то сообщить об этом, или отключить кэширование?

Добрый день Только начинаю изучать БЭМ и project stub Немного непонятно, как передавать в работу бэкенд разработчикам свой код? Project stub минифицирует исходный index.html, работать с ним бэкендер не сможет Как в таких случаях происходит процесс, проясните пожалуйста?

Добрый вечер В качестве основы на проекте использую project stub Подскажите как заставить собираться css файлы в подпапках проекта Скриншот - http://joxi.ru/a2XZ91nS1V5jRr

Здравствуйте. Есть блок с названием 'secondary-menu-bottom'. У него есть блок 'menu' с массивом 'items' и контент из одного item. Задача: Необходимо в шаблоне "смапить" массив items, до первого item-a, который уже существует в content. ApplyNext() почему то отказывается работать в связке c map. Если убрать map и оставить ApplyNext() - ошибок не будет. И аналогично с комментированием ApplyNext() - map сделает своё дело Ошибка: TypeError: Cannot read property 'map' of undefined

/ secondary-menu-bottom.bemjson.js /

module.exports = {
    block: 'secondary-menu-bottom',
    content: {
        block: 'menu',
        content: [
            {
                elem: 'item',
                content: include('desktop.blocks/more/more.bemjson.js')
            }
        ],
        items: [
            {
                url: '/',
                title: 'Все рецепты'
            },
            {
                url: '/',
                title: 'Салаты и закуски'
            }
        ]
    }
};

/ secondary-menu-bottom.bemhtml.js /

block('secondary-menu-bottom').extend()({ _inSecondaryMenuBottom: true });

block('menu').match(function() { return this._inSecondaryMenuBottom; })(
    content()(function() {
        return [
            this.ctx.items.map(function(item) {
                return {
                    elem: 'item',
                    content: { block: 'link', url: item.url, content: item.title }
                };
            }),
            applyNext()
        ]
    })
);

Есть блок с названием 'secondary-menu'. У него есть элемент 'top'. В элементе 'top' есть блок 'menu' с массивом 'items'. Знания вынес в шаблон, прописал deps. Но при обновлении страницы ничего не происходит. Я предполагаю, что в шаблоне после элемента 'top' не находит блок 'menu'. Можно ли использовать вложенность в шаблоне? Пример: block('secondary-menu').elem('top').block('test-block')...

/* secondary-menu.bemjson.js */
module.exports = {
    block: 'secondary-menu',
    content: [
        {
            elem: 'top',
            content: {
                block: 'menu',
                items: [
                    {
                        title: 'Статьи',
                        url: '/'
                    },
                    {
                        title: 'Рецепты',
                        url: '/'
                    },
                    {
                        title: 'Новости',
                        url: '/'
                    }
                ]
            }
        }
    ]
};

Шаблон:

/* secondary-menu.bemhtml.js */
block('secondary-menu').elem('top').block('test-block')(
    content()(function() {
        return this.ctx.items.map(function(item) {
            return {
                elem: 'item',
                content: {
                    block: 'link',
                    url: item.url,
                    content: item.title
                }
            };
        });
    })
);
/* secondary-menu.deps.js */
({
    shouldDeps: [
        { elem: 'item' },
        { block: 'link' },
        { block: 'menu' },
        { elem: 'top'}
    ]
})

Использую и работаю в исходниках project-stub. Есть блок с названием advantages. У него есть элемент 'icon' с модификатором 'type'. В папке _type лежат иконки(svg) и css файлы с путями до иконок. Пример:

/* advantages__icon_type_innovation.css */
.advantages__icon_type_innovation {
    background-image: url(innovation.svg);
}

При сборке проекта и обновлении страницы, пути верные и нет ошибок. Но в иконках указан путь в формате: background-image: url(data:image/svg+xml;charset=US-ASCII......) И иконки не отображаются. Возможно ли, что не правильный способ кодирования svg и как бороться с этим? Стоит отметить, что с png всё работает.

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

Изучаю сейчас созданием первого проекта используя BEM и projectstub https://ru.bem.info/platform/tutorials/start-with-project-stub/

И там есть вот такой код

 elem: 'price',
    content: {
        block: 'link',
        mix: [{ block: 'goods', elem: 'link' }],
        url: item.url,
        content: item.price
    }

С подписью

Шаблон может создавать не только HTML-элементы блока, но и другие блоки. Например, цену товара можно сделать ссылкой, используя для этого блок link из библиотеки bem-components.

Чтобы избежать вложенных селекторов при оформлении этой ссылки стилями, пометим её как элемент блока goods.

Почему мы делаем это именно в BEMHTML ? А не стандартным способ через созданием папки и объявлением блока в BEMJSON? А через BEMHTML поменять ему тег и добавить ссылку.

Может я еще какие то базовые вещи не изучил, но все же пытаюсь что то сделать по бэм. И не получается заюзать bem create. Может быть я плохо читал документацию, но я не нашел там "как" пользоваться этой командой, я прочитал много об этой команде, какие ключи можно использовать, что они создают и. т. д.

Но так и не нашел как пользоваться то ? На каком уровне переопределения вводить эту команду, да там написанно, что можно назначить какие то уровни переопределения в каком то файле, но вот как эта команда работает по умолчанию так и не нашел.

Как только начал читать документацию, увидел "bem create my-block" думаю вот как все просто то, но не тут то было, команда не завелась, уточнения про то, что нужно писать как то так "./node_modules/.bin/bem create -l desktop.blocks -b layout -T css" ни где в доках не нашел, только в чате телеграмм и в комментариях на гитхабе.

Собственно вопрос. Знаю, что можно не писать этот длинный путь, а просто указать "bem create my-block". Для этого посоветовали в файле .bashrc написать вот это "export PATH=./node_modules/.bin:$PATH" Но строчка "bem create my-block" в консоли не сработала =( В чем может быть причина ?

Добрый день.

В примере по созданию проекта на БЭМ (https://ru.bem.info/platform/tutorials/start-with-project-stub/), на шаге добавления картинки в блок logo, фрагмент определения блока image из примера на сайте выглядит так:

            block: 'image',
            attrs: { src: 'some-url' }

При этом в результате сборки в html попадает только: <img class="image">

По аналогии с другими блоками попробовал переписать определение так:

            block: 'image',
            url: 'some-url'

И получилось ожидаемое: <img class="image" src="some-url">

Подскажите, в чём здесь дело?

Поставил project-stub из merged ветки. В нём есть 3 места где закомментировано использование bemtree. Соответственно раскомментировал, но bemtree-файлы почему-то не подхватываются.

/desktop.bundles/index/index.html 75ms
23:25:20.359 - build started
23:25:20.366 - [rebuild] [desktop.bundles/index/index.bemjson.js] file-provider
23:25:20.367 - [isValid] [desktop.bundles/index/index.bemdecl.js] bemjson-to-bemdecl
23:25:20.370 - [rebuild] [desktop.bundles/index/index.levels] levels
23:25:20.372 - [isValid] [desktop.bundles/index/index.deps.js] deps
23:25:20.374 - [rebuild] [desktop.bundles/index/index.files] files
23:25:20.374 - [rebuild] [desktop.bundles/index/index.dirs] files
23:25:20.375 - [isValid] [desktop.bundles/index/index.bemhtml.js] bemhtml
23:25:20.375 - [isValid] [desktop.bundles/index/index.html] bemjson-to-html
23:25:20.375 - build finished - 23ms

Даже упоминания нет. Соответственно вопрос - что делать?

Здравствуйте. В стандартной сборке bem уже есть jquery, на данный момент там версия 3.1.0. Провайдим, пользуемся, всё отлично, спасибо. НО: Вопрос следующего характера: как "bem-правильно" выплюнуть jquery в глоб. пространство, чтобы jquery было доступно из консоли в браузере ( сейчас ни jQuery, ни $ не видит) ?

Спасибо!

Всем привет. Посмотрел я вебинар 2х годичной давности https://www.youtube.com/watch?v=1GWoMnYldYc про БЭМ. Сильно заинтересовался я этой методологией. Решил сделать тестовый проект на полном бем стеке. Склонировал себе project-stub и начал делать, все замечательно не без подводных камней конечно но закончил я верстку. И пришло время собирать все в production, и вот тут то и засада. В том вебинаре был специальный таск для enb который собирал все основные файлы в отдельную папку, собирал туда все картинки и что самое главное переписывал все пути к картинкам относительно их нового расположения и нового имени. Я создал конфиг файл для борьщика, он мне все картинки собрал то, попробовал скопировать таск с этого вебинара и вставить к себе, но понятное дело это просто так не работает. Вот сам таск:

var fse = require('fs-extra'),
    path = require('path'),
    glob = require('glob'),

rootDir = path.join(__dirname, '..');

config.task('dist', function (task) {

    // build targets and copy it to 'dist' folder
    function copyTargets(buildInfo) {
        buildInfo.builtTargets.forEach(function (target) {
                var src = path.join(rootDir, target),
                    dst = path.join(rootDir, 'dist', path.basename(target));

                fse.copySync(src, dst);
            });
    }

    return task.buildTargets(glob.sync('*.bundles/*'))
        .then(function (buildInfo) {
            copyTargets(buildInfo);
            task.log('Dist was created.');
        });
});

В package.json добавил строку в скрипты
"dist": "YENV=production enb make dist -n"
но если из консоли запускать
npm run dist
то выдает ошибку
"Exit status 1 Failed at the bem-project-stub@2.0.0 dist script 'YENV=production enb make dist -n'."
. Если запустить так
./node_modules/.bin/enb make dist
То выдает такую вот ошибку
Target not found: desktop.bundles/index
Хотя эта папка есть. Я решил что оно ищет эту папку, как не странно, в корне диска. Дописал вот так
'./' + glob.sync('.bundles/')
Начало выдавать такую вот ошибку
targets.forEach is not a function
Как я понял, просто функция buildTargets ожидает на вход параметр object а я его преобразовываю в string. Но тогда нужно вернуться на предыдущий шаг и понять почему выдает что "desktop.bundles/index" не существует.

Вообще вопрос заключается в том, как вы передаете ту же верстку по БЭМ с использование project-stub в production. Повторюсь, самая большая проблема как по мне, это пути к картинкам, фиг с ним, файлы то можно и руками собрать, их там все по 3 на каждую страницу, но вот как быть с путями для меня вопрос. Может кто поможет настроить сборщик корректно?

Привет!

Наверняка не все знают, что библиотека bem-core помимо прочего предоставляет специальный блок i18n для перевода интерфейсов на разные языки.

Использовать его можно как в клиентском JavaScript, так и в шаблонах.

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

Если вы только начинаете свой мультиязычный проект, просто склонируйте ветку i18n из подходящего репозитория. Если же вы хотите добавить поддержку переводов на существующий, вам поможет изучение последнего коммита в этой ветке.

Исходный проект - project-stub В корне проекта создана папка для своей библиотеки/дизайна. Структура такая же, как и в bem-components. Уровни добавлены в gulpfile levels: [ 'node_modules/bem-core/common.blocks', 'node_modules/bem-core/desktop.blocks', 'node_modules/bem-components/common.blocks', 'node_modules/bem-components/desktop.blocks', // 'node_modules/bem-components/design/common.blocks', // 'node_modules/bem-components/design/desktop.blocks', '.custom_libs/bove/design/common.blocks', '.custom_libs/bove/design/desktop.blocks', 'common.blocks', 'desktop.blocks' ],

При сборке выдает лог: Starting 'build'... events.js:160 [ throw er; // Unhandled 'error' event ^ 15:23:44Error: ENOENT: no such file or directory, scandir 'D:\Verstka\osipbove-bem-project.custom_libs\bove\design\desktop.blocks' ] at Error (native) The following tasks did not complete: build [15:23:44] Did you forget to signal async completion?

Process finished with exit code 1

Подскажите - куда копать при иных уровнях переопределения?

Добрый вечер!

Проблема во в чем - не работает js на блоке hello. Все прописано по примеру, но блок даже не инициализируется, т.е. i-bem у него появляется, а вот js-inited нет, соответственно не работает кнопка как должна. Может там что-то изменилось и как-то по другому нужно делать?

В блоке input подключается модуль [i-bem-dom], а в примере [i-bem__dom]. Если ставить такой, то инициализация проходит, но вываливает ошибку по методу findBlocksInside.

Прочитал документацию и возник вопрос как создать свой первый сайт по БЭМ

А конкретно работа с BEMJSON файлом и сборщиком.

Как новичку сложно разобрать пример на сайта методологии. Может кто сможет объяснить простыми словами. На примере "Hell World" Без использования полного комплекта project-stub

Думаю многим новичкам будет интересно. Как по пунктам создать сайт с фразой Hell World Используя BEMJSON и сборщик!

Структура:

common.blocks/
    menu/
        __link/                                
            menu__link.css

Стили с этого элемента не приходят при сборке. Сборка Gulp, клон проекта - project-stub , конфигурацию gulpfile не трогал.

1) Сборка Gulp'ом должна производится при схеме Nested? Настроено ли это в project-stub?

2) Если должно собираться в чем может быть ошибка? Пожалуйста помогите разобраться. Ссылка на проект - https://github.com/DjonyBastone/osipbove-bem-project