БЭМ - Форум

Подскажите, есть ли инструмент чтобы конвертировать html в bemjson (кроме рук и клавиатуры)?

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

Мне давно хотелось иметь простой инструмент пополнения контента через cms, для сайта основанного на БЭМ, тем более, как то обещал @tadatuta выложить, если напишу.

Преобразование из mardown в bemjson markdown-bemjson. Преобразование из bemjson в mardown bemjson-markdown.

Добрый день. Разбираюсь с БЭМом. Предположим, я реализовал блок label, использую его в технологии BEMJSON, по нему формируется HTML через BEMHTML, привязывается js, все хорошо. Встала задача динамически создавать блок label на уже отображенной странице по действиям пользователя.

Насколько я понимаю, мне необходимо сформировать HTML этого блока и проинициализировать его. что- то типа createLabel(parentBlock,params)

Как правильно реализовать эту возможность?

Суть: получить виртуальное BEM-дерево в виде Immutable BEMJSON, из которого получать реальный (а может виртуальный) DOM тогда, когда меняется BEMJSON.

Например, с помощью этого: https://github.com/facebook/immutable-js

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

Pros/cons?

upd: Реализация может быть такой:

На морду вместе с HTML выгружаем каким-то образом BEMJSON вместе с HTML (например, в data-bemjson как есть или более разумно подготавливая атрибуты для каждой дом ноды c сущностью — трехпроходная шаблонизация?);
На морде при инициализации восстанавливаем BEMJSON дерево, используя этот атрибут;
Восстановленое дерево засовываем в Immutable.Map(restoredBemjson);
Все изменения состояний и контента делаем через i-bem и через этот объект;
~~Отрисовываем~~ Пушим изменения в DOM, если объект поменялся (если a.set('key', 'newvalue') !== a — https://github.com/facebook/immutable-js#the-case-for-immutability);
...
PROFIT!!!11

Что-то упустил?

Подскажите как настроить enb на сборку динамического сайта, так, чтобы bemdecl не генерировался при каждой сборке. Хочу руками прописать туда нужны блоки.

Помогите пожалуйста подключить блок, ув. @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 блок меню создал по примеру из описания.

Возможно ли допилить BEMHTML так, чтобы он вместо функции по генерации html строки, выдал функцию по генерации виртуального DOM дерева? Если это возможно, то в какую сторону нужно копать?

{
    block: 'header',
    content: [
        { elem: 'logo', content: { block: 'logo' } },
        { elem: 'search', content: { block: 'search' } },
        { elem: 'login', content: { block: 'login' } }
    ]
}

или

{
    block: 'header',
    content: [
        { block: 'logo',    mix: { block: 'header', elem: 'logo' } },
        { block: 'search',  mix: { block: 'header', elem: 'search' } },
        { block: 'login',   mix: { block: 'header', elem: 'login' } }
    ]
}

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

Добрый вечер , есть код такого плана, где у меня map бегает по массиву (objects), считает кол-во объектов в этом массиве и потом выводит то , что внутри функции с аргументом item. Соотвественно , чтобы вывести 20 таких элементов item(objects__item) на cтраницу , нужно 20 объектов внутри массива.Как можно вывести 20шт одинакового содержания item, при помощи цикла? Я просто не пойму куда его применить можно. Пытался обернуть return for-ом внутри map , но это не помогло. Это нужно для того, чтобы не копипастить в bemjson аж целых 20 объектов, они нужны чисто для заглушки. Или это лучше как то через bemhtml делать?

   {
     block: 'objects',
     content: [
               {
                     preview: '../../img/objects/1.jpg',
                     title: 'Антена штатная',
                     company: 'Эльбрус-запчасти',
                     url:'/',
                     address: 'Французская наб.,24',
                     date: '21:30',
                     prise: '2 120',
           }

     ].map(function(item) {
        return{
            elem: 'item',
           content: [ ...... ]
        }
    }
}

На примере select.

    { 
         block : 'select', mods : { mode : 'radio', theme : 'islands', size : 'm' }, 
         name : 'select1', 
         val : 2, 
         options : [ 
             {val : 1, text : 'Доклад' }, 
             { val : 2, text : 'Мастер-класс' },
             { val : 3, text : 'Круглый стол' } 
         ]
    }```
хочу переопределить значение с top на middle.
.select_theme_islands .select__button {
    vertical-align: top;
}
Да и в принципе...

Есть у меня несколько блоков которые ходят в api за данными, затем на клиенте дорисовывают modal на основе полученного jsonа. Шаблоны содержимого разные, а вот функции которые дергают api одинаковые (они одну и ту же ручку дергают, с разными параметрами). Руки чешутся вынести эти функции куда-нить, чтобы не дублировался код. Как это сделать правильно с точки зрения методологии? И главное, куда их оформить?

Вопрос №2. Те же блоки. bemjson по которому собирается modal у меня хранится прямо в js модуле блока. Это нормально?

Создал блок и перенес content в bemhtml блока из bemjson страницы и кнопка сразу перестала показываться. bemhtml блока:

block('login')(
    content()(function() {
        return [{
            block: 'button',
            mods: { theme: 'islands', size: 'l' },
            text: 'Войти'
        }];
    })
)

bemjson страницы:

content: [
  ...
  { block: 'login' }
  ...
]

Результат следующий:

<div class="button button_theme_islands button_size_l"></div>

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

Предположим приходит json с массивом объектов. Задача смапить его и распихивать по ячейкам таблицы. Как это сделать с BEMJSON и BEMHTML?

В каком файле делать мап? Какой алогитм действий? Допустим если мне совершенно не нужна бэм структура, я не буду стилизовать таблицу. Просто b-table, как блок, а внутри элементы тегами (thead, tbody, tr, th, td).

Данный блок, https://github.com/bem/bem-js-tutorial/tree/master/pure.bundles/003-element-modifier/blocks/traffic-light реализует светофор. Если светофоров, блоками вставить несколько, то мигать будет только один, последний. Вопрос: почему так? Получается Модификатор применяется только к одному блоку, последнему или всё зависит от реализации кода js в модификаторе...

Подскажите пожалуйста в чем концептуальная разница по сабжу? И по каким причинам конструкция в bemhtml: block('content').mix()({block: 'grid'}) добавляет к блоку класс, но не формирует стили. А в bemjson: {block : 'content', mix: {block: 'grid'}, добавляет и класс и стили.

Люблю в проектах использовать UIKit. Где хранить сторонние JS/CSS и как их подключать в BEMJSON? Также для UIKit нужен заранее подключенный jQuery, он есть в bem-core, возможно ли инициализировать без дополнительного скачивания.

Что-то я не понял как запустить обработку bemtree, а точнее в каком месте...

Я хочу из bemjson перейти на bemtree - что для этого нужно (как и где вызывать шаблоны bemtree)?

bemtree в bemjson можно вызывать? Я так понимаю, что должно быть что-то типо этого

content: (function() { BEMTREE.apply('blockName'); } )()

Что необходимо добавить, чтобы при dom ready выставлялся модификатор js_inited, для кастомного блока?

Вот простейший bemjson:

({
    block:  'page',
    content: {
        block: 'block-a',
        js: true,
        content: 'Content here'
    }
});

Модификатор не выставляется. Что еще нужно добавить? ```

Привет , ребят. Как мне вставить собственный атрибут. Например data-custom, как это правильно в bem-json оформить.

Добрый день,

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

При написании проекта с нуля на bem-stub - структура делается по bemjson.

А как править структуру в bem-forum?

Ребят, делаю сайт , а у меня блок footer и меню одинаковые на всех страницах , вместе с контентом. Как - то можно вынести их в папку и из этой папки, подключать всем страницам , чтобы не копипастить в каждую страницу ?

Здравствуйте. Начал знакомство с БЭМ-инструментами, до этого использовал только методологию наименования классов. На данный момент хочу использовать бэм-инструменты для верстки однотипных шаблонов. Но у меня возникли проблемы с добавлением новых своих сущностей (а не блоков яндекса из bem-core и bem-components) в common.blocks, внятной документации не нашел. Использую enb-bem + bwmsjon + bemhtml. Также хотелось бы узнать, как отключить минификацию файлов html при сборке. Сейчас весь html склеивается в одну строку, а хотелось бы получать файл, пригодный для дальнейшей интеграции на cms.

Здравствуйте , у меня есть меню и там 10 списков li , как мне сделать так, чтобы я в бэм дереве его статически не описывал, а как то динамически вывести его. Хотя бы подсказку увидеть, в какую сторону мне двигаться чтобы этого добиться.

Указал в файлах *.deps.js и в папке __item и в папке b-filters

({
    mustDeps : { elem : 'item-w' }
})

но файлы стилей элемента item-w не подгружаются

bemhtml

block('b-filters').elem('item').def()(function() {
        var ctx = this.ctx;
        applyCtx({ elem: 'item-w', content: ctx })
   })

bemjson

{
    block: 'b-filters',
    content: [
        // {
        //  elem: 'item-w'
        // },
        {
            elem: 'cities',
            content: [
                {elem: 'head', content: 'Города'},
                {elem: 'item', content: 'Железноводск'},
                {elem: 'item', content: 'Кисловодск'},
                {elem: 'item', content: 'Лермонтов'},
                {elem: 'item', content: 'Невинномысск'},
                {elem: 'item', content: 'Пятигорск'},
                {elem: 'item', content: 'Ставрополь'},
            ],
        },
    ]
}

если подключить в bemjson элемент, тогда всё заработает

Как известно, был создан форк NodeJS -> io.js Планируется ли разработка bem-tools на нём?

IO обгоняет Node по скорости, если исходить из этой статьи http://www.quora.com/Is-IO-js-faster-than-Node-js

Есть ли смысл писать вручную bemjson для сайтов с динамическим контентом? Сайт берет данные из БД, bemjson генерируется автоматически, получается bundlename.bemjson.js используется только при сборке, и то зачастую, там прописаны 2 - 3 блока, все остальное попадает в сборку по зависимостям.

Вижу на странице:

TypeError: Cannot read property '0' of undefined
    at __$b29.iterateItems__$69 (.../users-list.bemhtml.js:501:46)
    at __$b29.iterateItems__$69 (.../users-list.bemhtml.js:509:21)
    at __$b29 (.../users-list.bemhtml.js:513:9)
    at __$g2 (.../users-list.bemhtml.js:1028:24)
    at applyc (.../users-list.bemhtml.js:33:20)
    at __$b75 (.../users-list.bemhtml.js:809:5)
    at applyc (.../users-list.bemhtml.js:105:20)
    at __$lb__$160 (.../users-list.bemhtml.js:784:22)
    at __$b74 (.../users-list.bemhtml.js:787:7)
    at applyc (.../users-list.bemhtml.js:102:24)

Реально ли собирать sourcemaps и при таких выбросах резолвить файлы/строки вменяемо?

Не могу разобратьcя:

{
    block: 'logo',
    mix: { block: 'header', elem: 'logo' },
    content: [
        {
            elem: 'name',
            content: {
                block: 'image',
                mix: {block: 'logo', elem: 'pic'},
                url: 'карзина.svg',
                alt: ' альтернативный текст '
            }
        }
}

Вопрос: Как сделать чтобы image блок находил картинку которая лежит в папке блока logo, но не хочется менять путь url

Приветствую! Вопрос, возможно, глупый, но все же хотелось бы узнать мнение людей, которые не такие "зеленые" в этом деле как я. Маленькая предистория: вдохновившись записями мастер-класса BEMup'a в Москве я принялся за дело - сайт получает данные из БД, они обрабатываются в BEMTREE, полученный bemjson в BEMHTML, а оттуда на клиент. Роутингом всего этого занимается express. Все отлично и прекрасно, но есть одно "но". Дело в том, что на всех страницах (точнее сказать по всем адресам, которые знает мое приложение) есть одинаковый контент в виде менюшки, лого и т. д. Так вот хотелось бы всю вот эту, так сказать, "статику" один раз описать в файле *.bemjson и забыть. Очень уж лениво каждый раз после обработки БЕМ-деревом оборачивать полученный bemjson своими блоками, да и если это ajax-запрос, то при таком подходе результат выходит мягко говоря забавный. Думаю, многие сталкивались с подобным, потому буду рад Вашему совету

html -> bemjson

Markdown в bemjson и обратно

Динамическое создание блоков

Что вы думаете о заворачивании bemjson в immutables?

bemdecl вместо bemjson

bem-drawer-menu

Использование BEMHTML для генерации виртуального DOM, возможно ли?

Как грамотнее оформить bemjson?

Вывод __item с помощью цикла

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

bemjson на клиенте и оптимизация

Блок не подключился внутри другого блока

BEMHTML + BEMJSON, рендер таблиц

Из руководства по модификаторам, светофор(ы)

bemhtml block().mix()(...) и bemjson {mix: ...}

Как подключить сторонний JS/CSS?

Как обрабатывать bemtree?

Не выставляется модификатор js_inited

Вставить собственный атрибут.

Как сделать переход внутри страницы

БЭМ форум. Как редактировать структуру?

Реиспользование BEMJSON одинаковых блоков

Добавление новых блоков.

Динамика(меню)

Не работает deps.js

Планируется ли порт bem-tools на io.js ?

Зачем bemjson на динамическом сайте?

Как вы это дебажите? ;-)

как сделать чтобы в поле url блока image попадала картинка из папки блока logo

BEMTREE+BEMHTML+bemjson