EN
mamatkazin
mamatkazin
3 мая 2017

Добрый день.

Ситуация следующая:
На форму через сокетное соединение приходит json с данными. Я преобразую его в массив и смотрю что за данные ко мне пришли. Затем в зависимости от того, что пришло идет вызов тех или иных функций. Например в данном случае, я формирую модальное окно и заполняю его данными в функции NewProcessForm(answer['data']), а затем вызываю его с помощью команды modal('show’). Модальное окно я вызываю с помощью фреймворка Bootstrap, а формирую я его согласно БЭМ.

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

.ws.onmessage = function(e) {

    answer = JSON.parse(e.data);
    if (answer["action_name"] == "NewProcessForm") {
        NewProcessForm(answer["data"]);

                setTimeout(function () { 
                    $('#place_modal_form').modal('show'); 
                }, 1000);
    }
}
function NewProcessForm(json_data){

    var jdata = JSON.parse(json_data); 

    modules.require(['BEMHTML', 'i-bem-dom'], (BEMHTML, bemDom) => {
        bemDom.append(bemDom.doc.find('#place_modal_form'), BEMHTML.apply({
            tag: 'div',
            cls: 'modal-dialog l-new-process',
            content: [
                {
                    tag: 'div',
                    cls: 'modal-content',
                    attrs: { 'data-form-name': 'new' },
                    content: [
                        {
                            tag: 'div',
                            cls: 'modal-body',
                            content: [
                                {
                                    tag: 'div',
                                    cls: 'panel panel-primary',
                                    content: [
                                        {
                                            tag: 'div',
                                            cls: 'panel-heading',
                                            content: [
                                                {
                                                    tag: 'button',
                                                    cls: 'close',
                                                    attrs: { type: 'button', 'data-dismiss': 'modal', 'aria-hidden': 'true' },
                                                    content: 'x'
                                                },
                                                {
                                                    tag: 'h3',
                                                    cls: 'panel-title modal-title',
                                                    content: 'Новая задача'
                                                }
                                            ]
                                        },
                                        {
                                            tag: 'div',
                                            cls: 'panel-body',
                                            content: []
                                        },
                                        {
                                            tag: 'div',
                                            cls: 'panel-footer',
                                            content: [
                                                {
                                                    block: 'c-button-submit',
                                                    js: true,
                                                    tag: 'button',
                                                    cls: 'btn btn-primary',
                                                    attrs: { type: 'button' },
                                                    content: [
                                                        {
                                                            elem: 'glyphicon',
                                                            tag: 'span',
                                                            cls: 'glyphicon glyphicon-ok'
                                                        },
                                                        {
                                                            elem: 'text',
                                                            tag: 'span',
                                                            content: 'Создать'
                                                        }
                                                    ] 
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }));
    });
}
AR1ES
AR1ES
23 мая 2017

У блока есть множество одноименных элементов, клик по которым необходимо обрабатывать.
Подписываюсь на клик так:
this._domEvents("item").on("click", this._onClick);

В методе _onClick необходимо получить бэм-элемент, по которому был клик. Как правильно это сделать средствами БЭМ и возможно ли вообще такое?
Пока сделал костыльное решение, которое конечно работает, но не кажется корректным:

_onClick: function(e) {
    var elems = this._elems("item");
    var elem;
    for (var i = 0; i < elems.size(); i++) {
        if(elems.get(i).domElem[0] === e.currentTarget) {
            elem = elems.get(i);
            break;
        }
    }
}
NatashaSite
NatashaSite
23 мая 2017

Столкнулась с такой проблемой:
Верстаю компонентный проект, из БЭМ использую структуру файлов и нэйминг в css. Собираю проект при помощи Gulp. Итак проблема: в одном из блоков подключаю другой блок при помощи gulp-rigger - //= ../block/block.html но проблема в том что он должен несколько иначе выглядеть и поэтому нужно блоку подставить модификатор, rigger этого не умеет, он только инклюдит файлы, подскажите что делать в этом случае?

Degtyarev-vg
Degtyarev-vg
20 сентября 2016

Хочется использовать сетку bootstrap в БЭМ. Для этого переделал сетку bootstrap по методологии БЭМ. Саму методологию БЭМ использую только в css. Вроде никаких нарушений нет при внедрении сетки, но т.к. этой методологией только начал пользоваться, хочется услышать мнение профессионалов, может есть какие-либо замечания.
Сразу скажу, что библиотеку bem components использовать не желаю, т.к. мне проще верстать элементы самому. Сетку bem grid использовать не приходилось, т.к. уж очень много заморочек при ее интеграции в проект.
А вот сам код html:

<div class="container">
    <div class="container__row">
        <div class="container__col container__col_md_4 container__col_xs_6">Блок 1</div>
        <div class="container__col container__col_md_4 container__col_xs_6">Блок 2</div>
        <div class="container__col container__col_md_4 container__col_xs_6">Блок 3</div>
    </div>
</div>

Т.е. блок container так и остался, у него есть элемент containerrow, и обязательный элемент containercol, т.к. модификаторы containercol* нельзя использовать самостоятельно, т.к. с точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента.

Очень надеюсь на ответ. Спасибо!

rteamx
rteamx
16 апреля 2017

Суть в чем, используется common блоки на адаптивном проекте, у кнопок на тачах при первом клике вместо клика отрабатывает _hovered. Проблему можно повторить в том же project-stab - включаем в хроме эмуляцию какого-нибудь iphone 6 и жмем на кнопку dropdown.

Как можно вылечить? В исходниках кнопки модификатора hovered нет, откуда он приходит?

psywalker
psywalker
20 мая 2017

Есть такой блок: https://monosnap.com/file/pGc1WTU62lxQLYMh65Nb7peD9zaLJJ

Правильно ли я его разметил по БЭМ?

.news
    .news__head
        .section__title.news__title
    .news__content
        .news__column-left
            .news__img-big-wrap
            .news__sub-title
                .news__link.news__link_big
        .news__column-right
            .news__link-wrap
                .news__link.news__link_small
            .news__date
psywalker
psywalker
19 мая 2017

http://take.ms/uRJoh - допустим есть у меня вот такой блок. Только классы я называю так: .news, .news__head, и так далее, короче по БЭМ-у.

А если мне нужно вот эти элементы на скрине стрелками указаны, завернуть в блок-контент. То как его назвать? .news__head__content нельзя же
.news__head-content ?

webhive
webhive
17 апреля 2017

Поставил 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

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

loratokareva
loratokareva
12 мая 2017

Разрабатываю файловую структуру нового проекта и задумалась, как предпочтительнее.
Есть два варианта:

  • вынос всех переменных в папку с переменными
  • оставить файл с переменными в разрабатываемых блоках

Вариант 1

   scss/
        blocks/
            menu/
                _common     # css menu
            list/
                _common     # css list
            form/
                input/
                    _common # css input
                label/
                    _common # css label
                button/
                    _common # css button
        variables/
            _menu           # variables menu
            _list           # variables list
            form/
                _input      # variables input
                _label      # variables label
                _button     # variables button
            _common         # variables form
    main                    # all variables and css

Вариант 2

   scss/
        blocks/
            menu/
                _variables
                _common          # css and variables
            list/
                _variables
                _common          # css and variables
            form/
                input/
                    _variables
                    _common      # css and variables
                label/
                    _variables
                    _common      # css and variables
                button/
        variables/
            _common              # variables design page
    main                         # all variables and css

Какой из вариантов построения файловой структуры предпочтительнее?

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

Zentro
Zentro
12 мая 2017

http://take.ms/3MHjg - как тут создать bem-объект из jQuery - объекта?
http://take.ms/m2Jly - как можно найти ближайшего родителя, parent in jQuery?

Degtyarev-vg
Degtyarev-vg
28 марта 2017

Добрый день. Помнится должен был пройти вебинар 23.03.2017 или 24.03.2017 (могу ошибаться, но примерно в этих датах). Есть запись? Все обыскал, но найти не могу, также нет никакого упоминания.

innabelaya
innabelaya
7 марта 2017

UPD: Опубликовали видео.

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

Мы расскажем:

  • О новостях БЭМ из мира React. О том как развивается библиотека bem-react-core, которая позволяет декларативно работать с React-компонентами в рамках БЭМ-методологии. Спикер Антон Виноградов.
  • О сборке веб-приложений из блоков в общем и о сборке БЭМ-проектов с помощью Gulp (а, возможно, и ENB) в частности. Спикер Дима Андриянов.

BEMup пройдет в пятницу, 24 марта в московском офисе Яндекса с 19:00 до 22:00.

Регистрация уже открыта: https://events.yandex.ru/events/bemup/24-march-2017/
Присоединяйся!

Stay BEMed!

deeonis
deeonis
30 декабря 2015

В этом посте мы постарались ёмко рассказать про всё, что произошло в мире БЭМ за четыре месяца с предыдущего дайджеста.

Новости библиотек

  • Выпустили bem-core 2.8.0. Главная тема релиза — интернационализация (i18n) из коробки.
  • Продолжаем работать над мажорным релизом bem-core, который принесёт множество заметных улучшений в ядро.
  • Выпустили bem-components 2.4.0. Главная тема релиза — обеспечение доступности (a11y) контролов, теперь они не уступают нативным.
  • Выпустили bem-history 3.1.0.
  • Реализовали dist-поставку библиотек bem-core и bem-components: вы можете подключить собранные CSS + JS и использовать блоки, просто копируя HTML из документации на bem.info.
  • Силами сообщества, выпустили bem-grid 2.2.0 и готовится к выпуску bem-forms 1.0.0.

    Новости технологий

Полностью переписали https://github.com/bem/bem-xjst — ядро для BEMHTML и BEMTREE. Оно стало заметно быстрее (как при сборке, так и при выполнении шаблонов), не требует компиляции, позволяет добавлять новые шаблоны в рантайме и вот-вот обзаведется новыми полезными фичами вроде source maps. Попробовать на деле можно здесь.

Новости инструментов

В начале декабря мы провели очередной Хакатон по БЭМ, посвященный разработке инструментов.

По итогам Хакатона появились:

Кроме этого, мы активно работали над ENB:

Опубликовали новые документы:

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

Обновили документы:

Интересные темы на форуме

deeonis
deeonis
14 октября 2016

Всем привет!

Кратко об основных изменениях и новостях в мире БЭМ за прошедшие 3 месяца с предыдущего дайджеста.

Новости документации

У нас появились два новых и крутых документа по БЭМ:

Кроме этого, многие другие документы исправлены и дописаны.

Новости библиотек

  • Закончили работу над стабильной версией bem-core 4.0.0. Основные изменения:

    • Изменился API блока i-bem
    • Изменился API блока querystring.
    • Из модуля identify удален опциональный параметр onlyGet.
    • Из модуля events удалены все статические методы.
    • В классе Event модуля events удалено поле result.
    • Элемент css блока page больше не поддерживает автоматическое добавление условных комментариев для IE.

    Все подробности можно прочитать в миграционном гайде. А еще лучше — посмотреть выступление @veged: https://events.yandex.ru/lib/talks/3685/ где он подробно рассказывает обо всех изменениях.

  • Заканчиваем работу над новой весрией bem-components — уже на этой неделе планируется релиз v4 с новым дизайном, обязательно расскажем об этом релизе отдельно.
  • Начали работу над bem-react-core. Это новая библиотека, которая позволит писать react-совместимые блоки в bem-терминах.
  • Параллельно с этим работаем над bem-react-components, библиотека будет содержать react-реализацию блоков из bem-components. На данный момент готовы блоки Button, Icon, Link, TextInput, TextArea, Checkbox.

    Новости технологий

  • Выпустили два мажорных, десятки минорных и патчевых релизов bem-xjst. Самая свежая весия — 8.3.0. Основные изменения:

    • Теперь режимы mix(), js(), attrs() заменяют значения BEMJSON.
    • Если выхотите расширить значение BEMJSON используйте applyNext().
    • Вызовы applyNext() во всех режимах по умолчанию возвращают BEMJSON.
    • Если вы захотите добавить mix, js или attrs теперь можно использовать addMix(), addJs() или addAttrs().

    Важно! bem-xjst 8.x пока несовместима с bem-components. Прямо сейчас мы работаем над этим.

  • Кроме bem-xjst 8.0.0 у нас появилась куча новых фич:

    • runtime lint
    • mod()/elemMod() теперь можно использовать без второго аргумента, чтобы сделать подпредикат модификатора с любым значением
    • новые appendContent() и prependContent()
    • функции эскейпинга оптимизированны и работают быстрее, а главное не тормозят если работают в холостую
    • новая опция production с помощью которой страница будет рендерится даже если случились ошибки в отдельных блоках

    Подробнее обо всех изменениях читайте в release-notes.

  • Мы взяли в официальную поддержку заготовку проекта на БЭМ-платформе с серверной частью на express: https://github.com/bem/bem-express.

    Новости инструментов

  • Выпустили ENB 1.4.0, release-notes.
  • Работали над плагинами для enb:
    • enb-bemxjst 8.0.0
    • enb-bem-specs 0.10.0
    • enb-stylus 2.4.0
    • enb-css 1.2.2
  • Мы продолжаем строить инструмент bem-lib-site для автоматической сборки документации для библиотеки блоков/проекта на БЭМ.
  • Кроме этого, идет большая работа в BEM-SDK.

    Новости мероприятий

  • Провели очередной хакатон по БЭМ, продвинулись по:
    • bem-config: доведен до готовности и ума модуль для работы с конфигурациями БЭМ-проектов.
    • bem-tools: создан готовый к использованию плагин bem-tools-create, чтобы его использовать нужно так же установить bem-tools-core.
    • плагины для bem-tools-create к различным IDE: для Atom, IDEA, и Sublime были собраны рабочие прототипы плагинов для запуска команды bem-tools-create.
    • модульной сборке c gulp: взяли gulp-bem-bundle-builder и попытались внедрить в реальные проекты, запустилось, поняли чего не хватает, работаем дальше.
    • по модулям BEM-SDK: доведены до рабочего состояния модули bem-deps, bem-graph для чтения и работы с зависимостями между БЭМ-сущностями, bem-decl для работы с файлами деклараций БЭМ-сущностей, bem-bundle, и другие.
  • Возобновили традицию BEMup'ов — 30 сентября очередной БЭМап для всех желающих прошел в Московском офисе Яндекса
  • Вместе с @zxqfox провели два вебинара про сборку проектов на gulp, если кто-то пропустил — смотрите в записи:

    .
innabelaya
innabelaya
24 января 2017

Коротко о том, как мы завершили прошлый год и с чем вошли в новый.

Новости документации

Новости сайта

Выкатили раздел БЭМ-библиотек в новом дизайне:

Новости библиотек

bem-core

  • Выпустили bem-core 4.1.0 и 4.1.1. Все изменения, вошедшие в оба релиза, описаны в CHANGELOG.

bem-components

  • Выпустили обещанную в прошлом дайджесте bem-components v4.0.0 с небольшим обновлением дизайна контролов и переходом со Stylus на postCSS.
  • Выпустили долгожданную версию bem-components 5.0.0, которая под капотом использует bem-core 4.1.1. В версию 5.0.0 вошли сразу два набора стилей: исходники на postCSS и скомпилированный CSS на случай, если вы предпочитаете использовать препроцессор.

bem-history

  • Пока не выпустили в релиз, но призываем вас уже посмотреть и пощупать библиотеку в отдельной ветке v4. Эта версия совместима с bem-core v4.
    Главное изменение — переименование блока uri в элемент uri__querystring, который расширяет базовую реализацию одноименного модуля из bem-core классом Uri. Методы класса сохранились без изменений.

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

bem-react-core

  • Работаем над BEM React Core — библиотекой для описания React-компонентов в виде деклараций БЭМ-сущностей.
  • Разработали полный пакет документации: README, REFERENCE и CONTRIBUTION GUIDE.

Новости технологий

bem-express

Выпустили очередную партию мажорных обновлений:

  • Обновили bem-core до версии 4.1.1 и bem-components до 5.0.0.
  • Перешли со Stylus к PostCSS. Из коробки поставляется тот же набор плагинов, что и в bem-components.
  • Внедрили опциональный livereload. Подробнее смотри в документации и в README проекта.
  • Добились ускорения сборки за счет прогрева npm-модулей, необходимых для сборки.
  • Отказались от bower для поставки библиотек. Теперь все зависимости ставятся через npm в папку node_modules.

bem-xjst

  • v8.3.1 (v7.4.1)

    • Исправлен баг в режиме extend(). Теперь режим работает как ожидается.
    • Дополнена документация: описание this.extend(o1, o2).
  • v8.4.0 (v7.6.0)

    • Новая опция unquotedAttrs позволяет не выводить двойные кавычки у тех HTML-атрибутов, значения которых позволяют это сделать.
  • v8.4.1 (v7.6.1)

    • Колбек режима extend(function(ctx, json) { … }) теперь принимает такие же аргументы, как и остальные колбеки в других режимах. Первый — ссылка на контекст исполнения шаблона (this), второй — ссылка на узел BEMJSON, на который сматчился шаблон.
  • v8.4.2

    • Функции экранирования теперь возвращают пустую строку, если аргументом был undefined, null или NaN. Раньше вы получали результат приведения к строке, что было исправлено.
  • v8.5.0

    • В BEMTREE добавлены режимы, имеющие отношение к данным: js(), addJs(), mix(), addMix(), mods(), addElemMods(), elemMods(). Остальные режимы, которые имеют отношение только к HTML, доступны в BEMHTML.
  • v8.5.1

    • Исправлен баг с расчетом this.position во время использования режима replace().
  • v8.5.2 (v7.6.4)

    • Исправлен баг в BEMTREE, связанный с рендерингом специального значения поля content { html: '<unescaped value>' }.
    • Обновлена bem-xjst onlinе demo:
      • Добавлен переключатель движков BEMHTML/BEMTREE.
      • Добавлена заглушка для BEM.I18N(), которая возвращает свой второй аргумент. Это удобно для копирования кода из продакшена в песочницу.
    • Обновлен README: описали основные отличия шаблонизатора, фичи и т.д.
    • Силами Михаила Степанова обновлена песочница. Вы тоже можете помочь: у нас есть задачи, помеченные как help wanted.

enb-bemxjst

  • Выпустили новую версию enb-bemxjst v8.5.2 с зависимостью "dependencies": { "bem-xjst": "8.5.2". Однако продолжаем активно поддерживать две ветки: 7.x и 8.x.

Обо всех изменениях читайте в примечаниях к релизу v8.5.2 и v7.6.4. Полный список изменений описан в CHANGELOG.

Новости инструментов

bem-tools

Выпустили bem-tools 2.0.0, где обновили bem-tools-create. Подробности читайте в документации.

bem-walk

Написали полный и понятный README.

project-stub

  • Внедрили новую версию bem-components v5.0.0 с учётом перехода на postCSS и новую версию bem-tools 2.0.0.
  • В качестве эксперимента включили gulp-bem в project-stub.

Новости мероприятий и сообщества

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

Сортировка

Метки