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

Существует страница '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 сообщить об этом?

Есть страница: / 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 не хочет работать. В либе ошибочка?(

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

Доброе время суток, у вас исчезла с сайта документация на BH, осталась только на гитхабе, вы собираетесь отказываться от BH?

bh.match('block', function(ctx) {
    ctx.content(ctx.param('...'))
}
bh.match('block', function(ctx, json) {
    ctx.content(json['...'])
}

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

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

Начал разбираться с БЭМ библиотеками для PHP, имею знание о существовании библиотек =)

  1. bh-php
  2. bem-core-php
  3. bem-components-php

Мне удалось установить лишь первую библиотеку через composer(очень удобно), но если верно всё понимаю - ничего не будет работать как минимум без второй.

Вот тут в обсуждении мне подсказали, что есть библиотеки, используемые Node.js, а есть для PHP. Сам пока предпочитаю использовать голый PHP 5.6.

Второй и третьей библиотеки в composer не нашёл, в руководствах по использованию дано указание для установки использовать bower. Если верно понимаю, то composer это менеджер пакетов для PHP, а bower это менеджер пакетов для Node.js Возник диссонанс - зачем мне устанавливать что-то для PHP через bower? Наводит на мысль что делаю что-то неправильно. Вопрос может быть некорректным с высоты опыта опытных=), но хочу ликбеза.

По ссылке выложил свои действия по установке и пробе примеров указанных тут. Номер картинки - это шаг, номер действия. PHP Storm выругался на рисунках 4, 5 и 7, что удалось мне частично исправить на рисунках 8,9. Ну а результат сами видите.

Вопросы: 1) Какие библиотеки мне надо ещё установить и как не бояться bower, если он для работы с php тоже помогает? 2) Возможно это касается настроек самого PHP Storm, но по возможности хотелось бы знать, почему ваши примеры заставляют его ругаться?

Кто каким пользуется? И у какого больше переспективы на существование, поддержку, развитие )))

давайте свои за и против))))

Проверил возможность использовать БЭМ-стек в песочницах. Учитывая наличие dist-поставки bem-core-dist и bem-components-dist препятствий для этого быть не должно.

Мотивация

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

Эксперимент

Для эксперимента взял блок hello из статьи Собираем статическую страницу на БЭМ. Вот что получилось:

Шаблоны заворачиваем в модуль:

bemhtml

modules.define('BEMHTML', [], function (provide, BEMHTML) {
  BEMHTML.compile(function() {
    block('hello')(
      js()(true),
      tag()('form')
    );
  });
  provide(BEMHTML);
} );

bh

modules.define('BH', [], function (provide, bh) {
  bh.match('hello', function (ctx) {
    ctx.js(true);
    ctx.tag('form');
  } );
  provide(bh);
} );

Для возможности использовать bemjson реализовал блок:

/**
 * @module bemjson
 */
modules.define(
  'bemjson', ['i-bem__dom', 'BEMHTML'],
  function(provide, BEMDOM, BEMHTML) {

    /**
     * @exports
     * @class bemjson
     * @bem
     */
    provide(BEMDOM.decl(this.name, /** @lends bemjson.prototype */ {
      onSetMod: {
        js: {
          inited: function() {
            BEMDOM.replace(this.domElem, BEMHTML.apply(JSON.parse(this.domElem.text())));
          }
        }
      }
    }));
  }
);

Пример использования:

<script type="text/bemjson" class="bemjson i-bem" data-bem="{&quot;bemjson&quot;: {}}">
{
 "block": "hello",
 "content": ""
}
</script>

Результаты

В проверенных песочницах все отлично работает. Plunker и CodePen дают больше свободы и поэтому больше подходят для экспериментов с БЭМ-стеком, а Pluker больше всего, потому что позволяет все разложить по отдельным файлам.

К сожалению в IE8 не работает хотя все необходимые ресурсы (shim, ie.css) для этого подключены в Plunker и CodePen кроме JSFiddle, ошибка:

'modules' is undefined

Вопросы

  • Какие есть варианты оформить bemjson отдельным файлом в Plunker?
  • Может быть кто-то знает более подходящею песочницу для экспериментов с БЭМ-стеком?
  • Тестирование, приветствуется.

UPD: v2

  • Каким образом можно оформить bemhtml в песочнице?

Есть такой код:

{
    block: 'donut-pie',
    tag: 'svg',
    attrs: {
        width: '45px',
        height: '45px'
    }
}

Все классно отрисовывается, а в консоль кидает: Uncaught TypeError: domNode.className.match is not a function.

Если сделать так:

{
    block: 'donut-pie',
    content: {
        tag: 'svg',
        attrs: {
            width: '45px',
            height: '45px'
        }
    }
}

Так ошибки нет. Почему?

Допустим, я хочу чтобы шаблоны компилились по технологии require('enb-bemxjst/techs/bemhtml'), а bemjson в html по технологии require('enb-bh/techs/bemjson-to-html'). То есть шаблоны я прогоняю через BEMHTML, а bemjson через BH. Как это сделать, чтобы не было ошибок при сборке?

Приветствую, из примера:

bh.match('field_type_email', function(ctx) {
    ctx.cls('validate');
});

а теперь на этот блок вешаем ещё один модификатор field_custom и обрабатываем

bh.match('field_custom', function(ctx) {
    ctx.cls('block-custom');
});

теперь модификатор field_custom затрёт действие модификатора field_type_email, а по историческим причинам мне просто необходимо, помимо бем классов ещё и class='... validate block-custom'

Кто-то пробовал конвертировать шаблоны на PHP в JS для работы на клиентской стороне? Чтобы можно было спокойно писать шаблоны на сервере и работать с ними на клиенте без ручного переписывания.

Наткнулся вот на такой репозиторий https://github.com/dan-da/php2js

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

https://github.com/trebushuk/choiser

  1. Допустим есть 10-20 страниц верстки. Шапка и подвал на этих 20 страницах повторяются 1 в 1. Хочешь что-то изменить? - 20 copy&paste в bemson. Это мой текущий уровень понимания. А нет ли случаем возможности выносить повторяющиеся части страниц в отдельные bemjson-файлы, чтобы править в одном месте? Я попробовал require в bemjson - работает, но не до конца. При повторной сборке bemjson-to-bemdecl сборщик (не зная про инклуды) считает что bemjson не изменился и естественно не перегенерирует bemdecl. Кто как решает эту DRY-задачку?
  2. Нет ли какой-нибудь технологии, которая на основе bemjson+bh сформирует список зависимостей как это сделано при сборке bemjson->bemdecl->deps? Очень надоедает для каждой bh-реализации руками писать deps.js

Хочется сделать такой шаблон BEM-сборки, который бы легко интегрировался в код сайта (с точки зрения программиста) и был оптимизирован в плане подключенных CSS/JS файлов. Речь про CMS 1С-Битрикс у которой своя система сборки/объединения статики. Вариант с merged-бандлами не рассматриваем. Для сборки используем enb + bh.

По факту нужно следующее: а) для каждой БЭМ-сущности понять перечень необходимых для ее работы статических ресурсов (включая зависимости) б) этот самый перечень включить в виде HTML-комментария в результирующей HTML непосредственно перед БЭМ-сущностью (чтобы программист знал какие файлы нужно подключить для каждого кусочка HTML)

Пример для bemjson:

{
    block : 'bl-1',
    content : [
        {
            elem : 'elem-1',
            mix : { block : 'bl-2' },
            content : [ ... ]
        }
    ]
}

получить html:

<!--
../../desktop.blocks/bl-1/bl-1.css 
../../desktop.blocks/bl-1/bl-1.js
-->
<div class="bl-1">
        <!--
        ../../common.blocks/jquery/jquery.js 
        ../../desktop.blocks/bl-1/__el-1/bl-1__el-1.js 
        ../../desktop.blocks/bl-2/bl-2.css 
        -->
    <div class="bl-1__el-1 bl-2">...</div>
</div>

Какой вариант вижу я сам: вклиниться в генерацию HTML (BH.apply), вычислять для каждого блока (с учетом миксов), генерировать комментарий и добавлять его в HTML.

Вопросы которые хочу задать:

  1. Есть ли более светлые идеи как сделать описанную задачу?
  2. Есть ли какая-то enb-технология которую можно взять за основу? Особо интересует вычисление CSS/JS необходимых для произвольного узла bemjson

Доброго времени суток коллеги

Необходимо вызывать такое древо

<div class="filter">
    <div class="filter__item selector selector_data_city">
        <labe class="selector__label">Choise City</label>
        <select class="selector__select select select_data_city"></select>
   </div>
</div>

Собственно 3 блока filter, в элементе которого вызывается selector с модификатором _data_city, внутри которого вызывается label и select с модификатором _data_city из блока в блок, аналогично контенту, по иерархии вниз передается data

bh.match('filter', function(ctx, json) {
ctx.content([
   elem: 'item',
   mix: {
        block: 'selector',
        mods: {data: 'city'}
       data: json.data()
   },
], true);
};

bh.match('selector_data_city', function(ctx, json) {
ctx.content([
   {
       elem: 'label',
       mix: {
           block: 'label'
      },
      content: 'Choice City'
   },
   {
     elem: 'select',
     mix: {
          block: 'select',
         mods: {data: 'city'}
         data: json.data()
     },

  }
], true);
};

bh.match('select_data_city', function(ctx, json) {
   options = MakeOptions(json.data());
   ctx.tag('select');
   ctx.content([options], true);
}

Если выполнять в однои файле, то все работает. Если разнести по методогии БЭМ в разные блоки и прописать то перестает работать наследственная связь, вызвается только filter прописав deps.js блоки вызываются, но не в правильном порядке

Если в вызове блока, вместо

     elem: 'item',
     mix: {
          block: 'selector',
         mods: {data: 'city'}
          data: json.data()
     },

использовать

     block: 'selector',
     mods: {data: 'city'}
     mix: {
          block: 'filter',
          elem: 'item'
     },
     data: json.data()

То, блоки вызываются в правильном порядке, и дата передается корректно

Объясните, почему так, и как через микс вызвать блок ПОСЛЕ блока родителя

Всем привет. Собираю БЭМ-проект по описанию zxqfox https://ru.bem.info/forum/175/ Далее запускаю сервер с помощью ENB: Проверяю результат по ссылке http://lookingschools.com:8080/desktop.bundles/index/index.html Открывается страница с примерами блоков библиотеки. Только вот селекты какие-то кривые. При нажатии страница мерцает. Подскажите, что не так и где править? Если делаю так: git clone https://github.com/bem/project-stub.git --depth 1 --branch v1.0.0 start-project cd start-project npm install , то все отрабатывает отлично. Но так как у меня php проект, пользуюсь описанием zxqfox.

Всем привет! У меня php сайтик на самописном mvc - фреймворке, сейчас хочу использовать методологию БЭМ для своего представления.

Сделал следующее:

Логинимся на наш сервер ( не локальный)
Перехожу в htdocs cd htdocs Версия git (у меня 2.4.2) git version Версия php (5.5.26) php -v Клонирую на сайт git clone --depth 1 -b php-bem-bh git@github.com:bem/project-stub.git ls-php-bem-bh Иду в эту директорию cd ls-php-bem-bh Чищу от остальных коммитов — опционально rm -rf .git; git init; git add ./; git commit -m "initial" Устанавливаю последнюю версию Node.js Перед установкой необходимо убедиться в наличии libexecinfo. Ставится он так: cd /usr/ports/devel/libexecinfo sudo make install Устанавливаем Node.js cd /usr/ports/www/node sudo make DISABLE_VULNERABILITIES=yes install clean Проверяю, (должно отобразится Hello World) node console.log('Hello World');

Для того, чтобы выйти из интерактивной оболочки, необходимо просто нажать Ctrl + C. Ctrl + C (2 раза) Затем устанавливаю менеджер пакетов npm Перехожу в директорию, в которой находился до перехода в текущую директорию cd Устанавливаю curl -L https://npmjs.org/install.sh | sudo sh Проверяю npm -v

Иду в директорию с проектом cd htdocs/ls-php-bem-bh стягиваю npm и bower зависимости (нужны только для сборки и станка верстальщика) npm install стягиваем bem/bh-php (можно и через composer: composer require bem/bh) git clone --depth 1 https://github.com/bem/bh-php.git ./vendor/bem/bh Собираю проект с помощью ENB:

Конфигурация процесса сборки хранится в файле .enb/make.js. На ее основе ENB подключает все технологии, которые составляют реализацию блоков: шаблоны, зависимости, CSS-правила и JavaScript-функциональность. ./node_modules/.bin/enb make -n смотрим файлы:ls ./desktop.bundles/index/ | grep php Для удобства разработки запускаем сервер: ( переназначаем порт с помощью аргумента –p ) node_modules/.bin/enb server

второй вариант если порт 8080 занят

./node_modules/.bin/enb server -p 3333 На нашем сервере запускаю инструмент для разработки, который при обновлении страницы в браузере будет автоматически пересобирать только ту часть проекта, которую затронули ваши изменения. Результат доступен по ссылке:

http://мой сайт.com:8080/desktop.bundles/index/index.html

или

http://мой сайт.com:3333/desktop.bundles/index/index.html

У меня такие вопросы:

  1. Как написано здесь https://ru.bem.info/forum/175/ В libs должны лежать бибилиотеки, в т.ч. библиотеки (с суффиксом -php) с bh.php шаблонами. Что-то я немогу их найти, где конкретно искать, и что я сделал не так?
  2. В папке desktop.bundles/index тоже ничего не вижу с расширением php
  3. Что мне нужно удалить, какие файлы и с каким расширением создавать?
  4. как мне передавать данные из своих контроллеров, если структура сайта следующая (упрощенный вариант):

index.php /app |----myapplication.php |----/core |----/config |----/controllers |----/helpers |----/filters |----/models |----/view |----------/contetnt |----------/layout ну и соответственно наш Бэм проект /ls-php-bem-bh |------------------/.bem |------------------/.enb |------------------/.git |------------------/common.blocks |------------------/node_modules |------------------/desktop.blocks |------------------/libs |------------------/desktop.bundles |---------------------------------------/.bem |---------------------------------------/index |-----------------------------------------------index.bemjson.js |-----------------------------------------------index.bemhtml.js |-----------------------------------------------index.html

Начал изучать expressjs хочу выкинуть jade и запихнуть bemtree + bh. Можете подсказать как это сделать? Смотрел видео и статью по sssr там более менее понятно, но мне хотелось бы не менять всю структуру серверной части под БЭМ, (иначе я в туториалах по express запутаюсь) а просто использовать его в качестве шаблонизатора.

Помогите пожалуйста подключить блок, ув. @Guria, (https://github.com/Guria/bem-drawer-menu. ) Вроде бы все элементы инициализировал, но браузер отвечает "SyntaxError: missing ) after argument list", ссылаясь на нало функции:

modules.define('menu', ['jquery', 'keyboard__codes'], function(provide, $, keyCodes, Menu) {
  provide(Menu.decl({ modName : 'fix', modVal : 'scroll' }
  {
    ...

Что делаю нет так.. ? Судя по ошибке какого-то аргумента не хватает. Блоки в common.blocks добавил kg-menu и kg-glyph, В bemjson блок меню создал по примеру из описания.

В BH@4.0.0 добавили метод processBemJson возвращает стандартный BEMJSON.

Правильно хотеть делать специальные шаблоны *.bemtree.bh для блока, если блоку надо уметь делать денормализацию данных (формирование BEMJSON из сырых данных)?

Хочется разобраться теме bemtree/priv.js, понять каким образом применять и как правильно подойти к выбору реализации?

Ниже материалы и обсуждения по теме.

Материалы

@apsavin bemtree генерирует входные данные для bemhtml. данные от вашего сервера попадают в bemtree, на выходе получается bemjson bemjson попадает в bemhtml, на выходе получается html Есть альтернативные технологии, например, sbmaxx/bem-priv Переходите или на bemhtml + bemtree, или на bh + priv.js Реализация priv.js может быть очень разной, если не хотите пилить сами - выше ссылка на готовую. Сложнее переиспользовать блоки, если формат данных, который ним приходит, зашит прямо в шаблоны.

Похожие топики

Всем привет :)

Я вот не совсем понимаю назначение bemtree... Для меня он выглядит некой лишней прослойкой (возможно я его не до конца понимаю).

BEM дерево у нас ведь могут генерировать и BH и BEMHTML. Зачем использовать для этого ещё и bemtree? Или его можно не использовать?

П.Н. Я где-то встречал уже подобный вопрос, но пробежав по тегам на форуме - ничего не нашёл...

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

Вот мой:

Как с помощью BH компилировать в JST:

{
    block: 'menu',
    content: [
        { elem: 'item', content: '1' },
        { elem: 'item', content: '2' }
    ]
}
bh.match('jst', function(ctx) {
    ctx.tag(null);
});

bh.match('menu', function(ctx) {
    ctx.tag('ul');
});

bh.match('menu__item', function(ctx) {
    ctx.tag('li');
});


bh.match('menu', function(ctx) {

    ctx.content([
        { 
            block: 'jst',
            content: '<% if (true) { %>'
        },
        ctx.content(),
        { 
            block: 'jst',
            content: '<% } %>'
        },
    ], true);

});

Результат:

<ul class="menu">
<% if (a) { %>
<li class="menu__item">
1
</li>
<li class="menu__item">
2
</li>
<% } %>
</ul>

Вот задался вопросом...

Сделал я проект. Теперь нужно его как-то в продакшен выкатить, чтобы работать с реальными данными/базой.

Что для этого лучше использовать? (например в связке с Meteor) и что из проекта мне нужно использовать?

Или всё взаимодействие с сервером должно быть только через API ?

П. Н. Сервер планируется на NodeJS.

Хочу использовать bh.js на клиенте. на сервере используется bh.php. Для сборки используются bem-tools. И что то я никак не соображу как подключить все это в браузер... Вот так пытаюсь подключить в deps.js блока

({
tech: 'bh',
mustDeps: [
  {
    tech: 'bh',       
  }
 ],    
})

Интересно, зачем тут https://github.com/bem/project-stub/blob/bh/.bem/make.js технология bemhtml подключается. Вроде как страница должна bh собираться, Но у меня статическая html не собирается с отключенным bemhtml. Это нормальное поведение?

Добрый день.

:)

А что нужно для того, чтобы вместо bemhtml использовать bh ?

П.Н. bh мне показался более наглядным и привычным, в сравнении с bemhtml. Вдобавок ко всему он ещё и быстрее.

Есть ли пример как организовать приложение с использованием шаблонизаторов bemhtml или bh с bemhistory на клиенте? Цель реализовать проект одностраничного приложения польность по БЭМ методологии и с использование минимального количества внешних библиотек.

Ссылки по теме:

Roadmap

  • Научится генерировать вменяемый bh.php код из bh.js шаблонов, если bh.php отсутствует, а bh.js в наличии, чтобы уменьшить кол-во работы при поддержке (тулзы не смогут?);
  • Показать, как можно использовать в WP, Drupal, Joomla(?), etc.(?);
  • Упростить API объекта BEMContext и другие мелочи (см. https://github.com/bem/bh-php/issues);
  • Причесать технологии, и все остальное по возможности;
  • Ну и: Добавить шаблоны в библиотеки, тэги на форум, документацию на bem.info, etc.

Шаблоны для bem-core и bem-components

Делитесь историями успеха, не стесняйтесь!

upd: поправил ссылки — перенсли проект в группу bem upd: еще поправил ссылки — веточки протухли, вместо PR получились отдельные библиотеки с шаблонами для PHP

По просьбе в твиттере от @life_maniac.

Те, кто используют наши шаблонизаторы BEMHTML или BH для верстки статики, часто спрашивают, как отключить минимизацию получаемого HTML.

Но не многие знают, что на самом деле никакой минимизации не происходит.

Почему? Потому что шаблонизаторы изначально генерируют из BEMJSON оптимальный для продакшена HTML.

Если вам необходимо получать красиво отформатированный HTML, подойдет любой pritty-print, например, js-beautify.

Его можно звать через CLI (js-beautify --html) либо встроить прямо в технологию сборки через JS API.

Приведу примеры такой технологии для bem-tools и ENB (технология написана исходя из предположения, что вы используете project-stub).

bem-tools

var BEM = require('bem'),
    Q = BEM.require('q'),
    environ = require('bem-environ'),
    join = require('path').join,
    BEMBL_TECHS = environ.getLibPath('bem-bl', 'blocks-common/i-bem/bem/techs'),

    beautify = require('js-beautify').html;

exports.baseTechPath = join(BEMBL_TECHS, 'html.js');

exports.techMixin = {
    getCreateResult: function(path, suffix, vars) {
        // не вызывать js-beautify в production-режиме
        if (process.env.YENV === 'production') return this.__base.apply(this, arguments);

        return this.__base.apply(this, arguments)
            .then(function(html) {
                return beautify(html, { /* см. доступные опции https://www.npmjs.com/package/js-beautify#options */ });
            });
    }
};

ENB

Для ENB приводить полный листинг не буду. Все сводится к полному копипасту html-from-bemjson.js с добавлением вызова бьютифаера на 40 строке:

var html = bemhtml.BEMHTML.apply(json);

return process.env.YENV === 'production' ? html : require('js-beautify').html(html, { /* см. доступные опции https://www.npmjs.com/package/js-beautify#options */ });

Использование

Когда технологии готовы, останется лишь заменить путь к технологии в конфиге сборки:

PS: Не забываем установить сам модуль: npm i js-beautify --save.