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

У меня есть некий блок с Голосованием (.vote). В нем есть две кнопки "За" и "Против" (button.voteaction). Так же у меня есть блок Кнопка (.btn). Кнопки "За"/"Против" должны быть блоками Кнопка (button.voteaction.btn) - т.е. микс получился. При клике на кнопки "За" или "Против" я хочу, что бы они выделялась цветом, например зеленым. Для этого у блока Кнопка есть модификатор green (.btn_theme_green) Т.е. при клике на voteaction с помощью JS я добавляю ей модификатор voteaction_active, но при это я должен добавить и класс btn_theme_green. Использовать в JS классы btn и btn_theme_green не хочется ибо кнопки могут быть заменены на другие (например, .btn34).

Скажите как правильно огранизовать взаимодействие этих двух блоков в JS?

Есть БЭМ блок, у которого прописаны свои поведения. Изначально его на странице нет. но в deps он прописан поэтому все исходники подгружаются. Так вот. Надо чтобы по событию нажатия кнопки, в DOM добавлялся этот блок. Таких блоков может быть добавлено много. Необходимо чтобы он при всем при том еще и работал. Каким образом это сделать?

Привет. Наткнулся на такую проблему. Когда делаю попап

 {
                block : 'popup',
                mods : { autoclosable : true },
               ...
}

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

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

Кто-нибудь пробовал запускать преобразование большого количества таргетов? bh/html-from-bemjson-i18n намертво застревает, можно 20 минут смотреть, как оно потихоньку съедает память, но ни одного файла так и не появится. Проявляется при превышении определённого количества таргетов, windows 7. До этого при помощи bemtree успешно билдится такое же количество bemjson-файлов.

А пока пришлось наваять такую кашу в enb-make, чтобы билдить порциями https://gist.github.com/xdghcnt/501a7e9b293fd270405c

Эти выходные с BEMup'ом в Питере были просто чудесны! Не говоря про погоду, которая просто была сказочной, программа митапа была насыщенной, а многие приехали в Питер аж из Москвы посмотреть и пообщаться с нами. Спасибо, мы тронуты!! А еще нас много просили показать мастер-класс не самим, а сделать так, чтобы пришедшие участники могли писать код. А это ой как не просто! Почти 2 месяца подготовки заданий и написания тестов, сто раз проигранные в мозгу планы, трансляция, видео, зал, как все это соединить воедино, плюс тестирование на --котиках-- коллегах, и вот он долгожданный день! Это был урок, проверка, и круто, что все получилось! Даже коллеги не из службы БЭМ подходили и говорили: «Круто! Я сделал что-то сам на bem-core!» И да, нам есть, что теперь оттачивать дальше, к ноябрю А вы это, не расслабляйтесь! https://tech.yandex.ru/events/bemup/ :) Видео как всегда через 2 недели в разделе «Выступления», фото уже тут https://www.facebook.com/media/set/?set=a.825215090831947.1073741904.122612334425563&type=1, вопросы к нам можно писать в форум и помечать 2-мя метками — продукт и asktheteam

https://github.com/factorymn/bem-factory/tree/master/common.blocks/fancybox

Обернул fancybox в модульную систему. Мне кажется что не верно в данном случае провайдить jquery. Что там должно быть?

Как и в случае с https://github.com/bem/bem-forum-content-ru/issues/49 плагин работает из скоупа jquery

После клика на кнопку сохранить ничего не происходит. Бесконечно прокручивающийся желтый загрузчик.

После перезагрузки страницы: Метки не обновляются, но заголовок исправляется.

Chrome 36

Есть какое-то стандартное решение?

Здравствуйте. Занимаюсь сабжем. Я - дизайнер, на проекте совмещаю две работы - проектирую/прототипирую интерфейс, а после согласовки - рисую его красиво. Я - ни разу не программист/верстальщик/кто-либо другой.

Давно вожу жалом в сторону БЭМ; он привлекает меня даже не потому, что иногда приходится общаться с программистами, а потому, что вижу в нём помощь в самоорганизации. Проблема старая и всем знакомая - проект крупный, и всё в башке нереально удержать, приходится как-то структурировать.

В общем, довольно прелюдий, вот мой ламеронубский вопрос.

Очевидно, что шапка сайта - блок. Она есть на всех страницах. А внутри шапки еще довольно-таки самостоятельные блоки: логотип, выпадающий список с языками, меню навигации, поп-ап с формой логин/пароль/войти, поп-ап с регистрацией. Или же эти объекты нужно считать элементами блока "шапка"?

То есть, у меня проблемы с логикой методологии, помогите разобраться.

Второй вопрос из этой же серии. В статье на хабре ( http://habrahabr.ru/company/yandex/blog/234905/ ) сказано:

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

В таблице - ячейки. Ячейка - элемент. Допустим, внутри ячейки мы имеем какой-то интерфейс, допустим - форму ввода каких-то данных, грубо говоря - пару полей и кнопка вроде "сохранить". Вот этот интерфейс внутри ячейки считать блоком? Блоком со своими элементами? То есть, может ли элемент внутри себя иметь блок? Как их в таком случае лучше называть? Допустим, таблица - блок с названием b-table. Следовательно, имя ячейки - b-table__cell. А как тогда назвать нашу формочку внутри ячейки, учитывая что она тоже блок? b-table-cell-form? b-cell-form? b-form?

После нескольких попыток подобраться к данной технологии, стало ясно - отсутствие документации никак не продвинет технологию в массы.

Читать, что-то на форумах, в каких-то статьях и не понятном разделе "Руководства" - очень интересно, но кроме каши не дает ничего.

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

Нет примеров кратких но самодостаточных, большинство тем возникали на форуме.

Нигде не сказано, что новым трендом в данной технологии является выделения mVc в отдельный bundle design. Изобилие bem и enb в разных статьях, в документации должно быть что-то одно.

Ситуация вводящая в ступор:

  • создаем страницу bem create -l desktop.bundles -b index на выходе получаем один файл index.bemjson.js;
  • компилируем bem make, на выходе еще получаем 10 файлов.

WTF? Что за файлы, за что отвечают, являются ли они build файлами и не подлежат ручному редактированию? Почему финишные файлы называются по разному, например index.html _index.css _index.js? Нельзя ли результат компиляции, что не подразумевает ручного редактирование перенести в подпапку distr например?

Очень нужна документация, по каждой технологии, устаревшие технологии документировать не первостепенно. Показывать примеры и с подгрузкой данных через API, и динамическое изменение DOM.

Из того, что не критично, но хотелось бы получить:

  1. право переопределять константы BEM_CLASS и BEM_PARAMS_ATTR, ну не нравится мне i-bem и data-bem, хочу получить js и data-js;
  2. не нравится именование модулей i-bem__dom, i-bem как-то не вписывается в Code Style.

Из документаций которые покрывают 99% вопросов мне нравится https://docs.djangoproject.com/en/dev/ http://symfony.com/doc/current/index.html http://git-scm.com/doc - это те документации, которые рассказывает и о различных приемах, и о назначении, и полноценные use case.

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

Привет. Занимаюсь тем, что пытаюсь внедрить БЭМ стэк на уже готовый к первому релизу проект. Т.к. полностью и сразу мне его на БЭМ переводить никто не дает, то я решил поступить следующим образом, определить бандл components, в components.bemdecl.js объявить зависимости от всех блоков, которые у меня сейчас есть, и понемногу начинать разбивать код сайта на блоки там где я могу это безболезненно сделать. В принципе такой подход работает. Но меня напрягает необходимость после добавления нового блока в мой уровень, прописывать его в deps файла components.bemdecl.js, по-любому кто-то будет забывать это делать. Можно как-то сделать, чтобы у меня собирались все блоки со всеми элементами уровня по умолчанию, без необходимости править components.bemdecl.js?

Привет! Подскажите есть в природе enb или bem-tools технологии для работы с графикой(jpg/png/svg). Например блок с фоновой картинкой(картинка лежит гдето в папке блока)

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

Неправославный вопрос: кто-то пробовал разрабатывать, используя бем и Enb, под виндой? Работает ли? Какие могут возникнуть подводные камни?

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

6 years ago

BEM + php

Подскажите как использовать 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));
        });