Подскажите как создать блок BEM (в идеале из BEMJSON) в runtime, например по событию нажатия на кнопку, и добавить его в к содержимому другого блока.

Подскажите как использовать php-скрипты при сборке страницы? Я только начал вникать в БЭМ и не въезжаю где писать серверную часть на php. В bemhtml описываю шаблон, в bemjson структуру блоков... где писать php-скрипты?

А кто-то использует subj?

Поделитесь как это использовать?

Решил я попробовать обернуть сторонний виджет в блок БЭМ, возьмем например Yandex Share

<script type="text/javascript" src="//yandex.st/share/share.js" 
    charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" 
    data-yashareQuickServices="vkontakte,facebook" data-yashareTheme="counter"></div>

Я создаю блок bem create -l desktop.blocks -b yashare с содержимым

# desktop.blocks/yashare/yashare.bemhtml
`block('yashare')(
    tag()('div'),
    bem()(false),
    cls()('yashare-auto-init'),
    attrs()({'data-yashareQuickServices': '...', 'data-yashareTheme': '...')
)

/* desktop.blocks/yashare/yashare.browser.js */
modules.define('yashare', ['loader_type_js'], function(provide, loader) {
    loader('//yandex.st/share/share.js', provide);
});

А теперь вопрос, как воспользоваться данным блоком, чтоб подключения share.js было единожды (это уже реализует loader), но только в случае наличия на странице блоков yashare?

Если в yashare.browser.js добавить modules.require(['yashare'], function() {}); то подключение скрипта будет вне зависимости от наличия на странице блоков.

В качестве виджета может быть и другой, главная задумка, что скрипт подключается единожды независимо от количества блоков (виджетов) на одной странице.

P.S. Из-за плохой, не структурированной, а местами просто устаревшей документации - очень высокий порог вхождения...

Всем привет! Когда запускаю генератор, то на вопросе "Use design from bem-components? YES" вылетает такая ошибка http://floomby.ru/s2/hW686z Что это значит? Вроде пишет что нет какого-то модуля, вообщем не могу разобраться..

Я создаю несколько страниц командой bem create -l desktop.bundles -b about bem create -l desktop.bundles -b map

После выполнения bem make я получаю соответствующие css и js для каждой страницы, а как получить общий css и js для подключения на сайте?

И второй вопрос, на сколько я понял команда bem make не "минифицирует" js и css файлы?

P.S. за время написания данного текста, курсор раз 20 убегал в поле поиска, не удобно.

Что делаю не правильно?

modules.define('navigation', ['i-bem__dom'], function (provide, BEMDOM)
{
  provide(BEMDOM.decl({block: this.name}, {
    onSetMod: {
      'js': function ()
      {
        console.log("navigation активен")
      }
    }

  }, {
    live: function ()
    {
      this
        .liveBindTo('click', function ()
        {
          var wrapper = this.findBlockOutside({ blockName : 'wrapper'});
          if (this.hasMod("open")) {
            this.delMod("open");
            wrapper.delMod("compress");
          } else {
            this.setMod("open", "true");
            wrapper.setMod("compress", "true");
          }

        });

    }
  }));

});

modules.define('wrapper', ['i-bem__dom'], function (provide, BEMDOM)
{
  provide(BEMDOM.decl({block: this.name}, {
    onSetMod: {
      'js': function ()
      {
        console.log("wrapper активен")
      }
    }
  }, {
    live: false
  }));

});

this.findBlockOutside({blockName: 'wrapper'}) возвращает null

Кажется, я упустила что-то из документации по bemhtml. Хочу ответы на следующие простые вопросы:
1) как в bemhtml связать input-radio с label, когда radio не находится внутри label?
2) как определить в bemhtml input-radio и label, когда radio внутри label?
в обоих случаях radio одиночный.
Примеры видела, пост про radio (http://ru.bem.info/libs/bem-components/v2/desktop/radio/docs/) читала.

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

https://github.com/zxqfox/express-bem

И 3 плагина — .bemhtml.js, .bemtree.js, и собственно make через bem-tools.

Технически, наверное, .bemhtml.js может подключать и .bh.js, для этого нужно только подменить расширение, но протестировать не на чем.

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

Спасибо за внимание ;-)

block('content')
(
    tag()('article'),

    elemMatch()
    (
        tag()(this.ctx.elem)
    )
);

Никак не пойму, почему не отрабатывает этот шаблон, а конкретно не подхватывает tag()('article'), если убрать из шаблона elemMatch() то тэг проставляется

Возможно я это упустил из док. Ткните мне как правильно в browser.js делается поиск блоков рядом? Или как это делаете вы?

Сейчас я делаю что-то типа:

this._bla = this.findBlockOutside('category').findBlockInside('control-group');

В продолжение https://github.com/bem/bem-core/pull/622/files

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

@tadatuta: в данном случае есть «обычная» зависимость от js и browser.js — изменение блоков в этих технологиях инвалидирует сборку бандла. плюс по depsByTech есть зависимость от bemhtml. и изменение блоков в технологии bemhtml сейчас пересборку не вызывает, поэтому приходится передавать force явно.

@zxqfox: очень часто слова хак и depsByTech встречаются рядом.

@tadatuta: так и есть. полноценную реализацию, которую начали делать в рамках bem-tools@v1 так и не довели до конца :(

@veged: дело не столько в depsByTech сколько в сшивании двух технологий в один файл и инвалидации кешей

@zxqfox: Честно говоря, проблема здесь не в бэме или технологиях, а в его конкретной реализации/оптимизациях.

@zxqfox: Насколько я помню, там сейчас есть небезбажный монолит APW. Это он о протухшем кеше не знает?

@veged: APW это абстрактная очень штука, она сама по себе ни о чём таком не может ни знать ни не знать — но да, это уже оффтопик

Хочется понять, что надо сделать, чтобы этой проблемы не было.

На мой взгляд вариантов два:

• Добить полноценную реализацию — для этого нужна её формализация
• Перевести на enb и добить её там — для этого нужен адепт по enb, и опять же формализация

У кого-то еще есть желание что-то с этим сделать?

Если есть у кого, прошу ссылочку. Хочется видеть сборку простого проекта с bemtree

Наш постоянный фронтендер собрался в отпуск, а проект, кровь из носу, надо пилить. Необходимо разработать фронтенд для многошаговой регистрации с заполнением большого количества полей профиля. На вход будут предоставлен аккуратный psd-макет, консультации дизайнера и проджект-менеджера. На выходе мы ждем фронтенд, который будет сделан максимально приближенно к тому, что мы обычно делаем: БЭМ, LESS, jQuery, немного Knockout. Причем аккуратно, с любовью.

Столкнулся с этой ошибкой когда решил положить блоки и бандлы в папку src/ на проекте и настроить сборку так.

/
    .bem/
    src/
       desktop.blocks
       desktop.bundles

в make.js соответственно указал

getBundlesLevels: function() {
        return [
            'src/desktop.bundles'
        ];
    }

Сборка происходит нормально, но в такой схеме сервер падает на этом then

BEMTREE.apply(json)
        .then(function(bemjson) {
            res.send(BEMHTML.apply(bemjson));
        });

А если положить эти же папки, блоков и бандлов, в корень то все отрабатывает как надо.

Подскажике как поправить и настроить предложенную выше схему.

Весь кусок про сервер и шаблонизацию

    var bemtreeTemplate = FS.readFileSync( './src/desktop.bundles/index/_index.bemtree.js'),
        bemtmlTemplate = FS.readFileSync( './src/desktop.bundles/index/_index.bemhtml.js');


    var context = VM.createContext({
        Vow: vow,
        console: console,
        borschik: {
            link: function(i) {
                return i;
            }
        }
    });

    VM.runInContext(bemtreeTemplate, context);
    BEMTREE = context.BEMTREE;

    VM.runInContext(bemtmlTemplate, context);
    BEMHTML = context.BEMHTML;

    BEMTREE.apply(json)
        .then(function(bemjson) {
            res.send(BEMHTML.apply(bemjson));
        });

Где можно почитать?

Есть ли способ исключить блок из сборки? Например, есть блок A на уровне проекта и на уровне библиотеки. Хотелось бы, чтобы в сборку попала только реализация из проекта. Эксперименты с noDeps к желаемому результату не привели. Может быть, я не умею его готовить?

До сих пор не могу понять магию apply, applyNext, applyCtx хотя ни раз читал ман по ним

Вообще мне нужно изменить элемент на ссылку, если в параметрах есть url, я сделал так

block('nav').elem('item')
(
    match(this.ctx.url)
    (
        function()
        {
            this.ctx.block = 'link';

            delete this.ctx.elem;

            this.ctx.mix   = [
                {
                    block: this.block,
                    elem: 'item'
                }
            ];

            applyCtx(this.ctx);
        }
    )
);

Получаю бесконечную рекурсию - [RangeError: Maximum call stack size exceeded]

Сейчас я поставил такой костыль:

block('nav').elem('item')
(
    match(this.ctx.url && !this.ctx._prepared)
    (
        function()
        {
            this.ctx.block     = 'link';
            this.ctx._prepared = true;

            delete this.ctx.elem;

            this.ctx.mix   = [
                {
                    block: this.block,
                    elem: 'item'
                }
            ];

            applyCtx(this.ctx);
        }
    )
);

Как сделать правильно?

Покажите пожалуйста примеры такого использования

Входящие: Есть редктор, который сохраняет примерно такие данные

post.html = '<p>\r\n\t\tСтремление к совершенству – пожалуй, именно так можно описать развитие человечества. Вот взять, к примеру, женскую красоту. Чего только не сделают девушки, чтобы оказаться самой красивой. ... .</p>\r\n\t<!-- gallery(3) --><p>\r\n\tА вот раньше оверклокинг существовал исключительно ради выгоды. ... </p><p><!-- gallery(4) --></p>'

В этой строке есть вставки коментариев. Задача: В контексте bemtree хочу заменить комнтарии на html код блока галлереи с слайдером. Хоче сделать примерно следующее:

post.galleries.map(function(gallery, index) {
        var id = post.galleries_list[index].id,
            images = post.galleries[index].images,

            galleryBlock = {
                block : 'slider',
                slides : images
            }; //Здесь что-то нужно сделать что бы распарсить блок в строку

        post.html = post.html.replace('<!-- gallery(' + id +') -->', galleryBlock)
    })

Вопрос: Как в bemtree/bemhtml распарсить блок в html строку? Или предложите другие варианты решения проблемы?

Как к примеры вы разделяете блоки самого сайта и админки для сайта написанных на БЭМ, сейчас у меня это 2 разных проекта (основанных на project-stub, тоесть это 2 копии project-stub для публичной части и админки), думаю как их можно соеденить

Please kick me!

demo

/* global modules:false */
modules.define('singleton', ['inherit'], function (provide, inherit, Singleton) {

    /**
     * @abstract
     * @class Singleton
     */
    Singleton = inherit( /** @lends Singleton.prototype */ {

        /**
         * Must be implemented by subclass
         * @constructor
         * @private
         */
        __constructor: function () {}


    }, /** @lends Singleton */ {

        /**
         * Instance stores a reference to the Singleton
         * @private
         */
        _instances: [],

        /**
         * Get the Singleton instance if one exists or create one if it doesn't
         * @param c
         * @returns {*}
         */
        getInstance: function (c) {

            if (!this._instances[c]) {
                this._instances[c] = new c;
            }

            return this._instances[c];
        }
    });

    provide(Singleton);

});

/* global modules:false */
modules.define('my-singleton', ['inherit', 'singleton'], function (provide, inherit, Singleton, MySingleton) {

    /** @class MySingleton */
    MySingleton = inherit(Singleton, /** @lends MySingleton.prototype */ {

        /**
         * @constructor
         * @private
         */
        __constructor: function () {
            this._property = null;
        },

        setProperty: function (property) {
            this._property = property;
        },

        getProperty: function () {
            return this._property;
        }

    }, /** @lends MySingleton */ {

        getInstance: function () {
            return this.__base(this);
        }

    });

    provide(MySingleton);

});

modules.require(['my-singleton'], function (mySingleton) {
    var singleA = mySingleton.getInstance();
    var singleB = mySingleton.getInstance();
    alert(singleA === singleB)
});

Когда в первый раз заходишь на форум, еще не авторизован через GitHub. Начинаешь просматривать посты, проматываешь страницу вниз. При этом желтая кнопка авторизации уползает за пределы видимости. Если ты ее сразу не заметил и не авторизовался, ответить на пост невозможно. Там просто нет кнопки ответа, а то что это из-за отсуствия авторизации — не очевидно. Думаю, надо для неавторизованных делать кнопку "авторизоваться и ответить"

Привет! А есть/будет у форума RSS-лента? Есть вообще какой-нибудь roadmap?