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

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

Вот мой:

Как с помощью 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>

Поскольку мы не ищем лёгких путей, то у нас на проекте до сих пор i-bem какой-то дремучей версии и свой собственный сборщик.

Мне всё это несколько надоело и я пробую мигрировать на bem-core. Сразу сейчас прикручивать enb и вот это всё — неподъёмная задача, поэтому цепляю bem-core из бовера. И вот тут напоролся на то, что в https://github.com/bem/bem-core/blob/v2/bower.json не прописаны вообще никакие зависимости, в частности ymaps/modules.

Собственно вопрос в том, есть ли способ подключить ymodules в бовере более прямой, чем указать гит-путь?

"dependencies": {
  "modules": "git@github.com:ymaps/modules.git#0.1.0",
}

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

БЭМ-разработчики,привет!

Если вы помните, после вебинара, который мы провели совместно с проектом LoftBlog в январе 2015, где мы верстали Яндекс.Музыку, мы объявили о небольшом конкурсе по разработке своего проекта на БЭМ. По заданию конкурса нужно было познакомиться с БЭМ-технологиями и разработать свой проект, используя по максимуму стек технологий БЭМ.

В течении месяца вы писали код, а мы были в ожидании ваших проектов. Дедлайн конкурса был 23 февраля 2015 года и он подошел к концу.

Давайте подведем итоги. Мы получили 7 проектов, код которых мы собираемся оценить, подготовить ревью, а лучшим разработчикам работ вручить памятные и полезные призы.

Проекты, которые участвуют в конкурсе:

Мы оценим каждый присланный проект. Главными критериями будут соблюдение методологии БЭМ и использование БЭМ-стека (project-stub, bemjson, bemhtml, bh, i-bem.js).

Результаты конкурса планируем опубликовать после 17 марта 2015 года.

Спасибо Вам за участие и Stay BEMed!

Имеется код

.row {
  &__controls { 
  }
  &:hover .row__controls {
  }
}

Смущает то, что для row_controls нужно обязательно писать его имя. В результате в соседних правилах описываются стили одного элемента, но глазами этого не видно, потому что один раз он пишется как &_controls, а второй раз .row_controls. Как вы пишете такие конструкции?

Скажите, есть ли конвертер или какой-то метод перевода из deps для bem-tools в deps для enb?

Из под bem в enb?

enb-less искал искал не нашел.

А в проекте куча less файлов.

Пришлось написать свой https://github.com/pavelpower/enb-less

Писан на основе enb-stylus.

Может кому полезно будет.

Особенность у less - большая проблема с относительными путями.

По этом пришлось чуть изменить подход - сразу читать тело файла .less и вставлять без промежуточного @imports

Это зло конечно для генерации map.

Но может будут идеи как сие обойти можно?

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

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

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

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

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

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

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

Помнится один замечательный пост http://clubs.ya.ru/bem/replies.xml?item_no=2807

Вопрос - может кто уже создал source map?

А то ребята не хотят работать с простыней, хотят чтобы все было разбито по полочкам.

Всем привет! Подскажите, где посмотреть пример серверной шаблонизации? Чтоб одни и те же блоки можно было рендерить и на сервере и на клиенте.

Пытаюсь подключить Яндекс карту в проекте. За основу взял следующий пример: https://github.com/zloylos/ymapsbem

Но вот почему-то не работает инициализация по декларации { name: 'this.name', modName: 'api', modVal: 'ymaps' }

modules.define('map', ['i-bem__dom', 'loader_type_js', 'jquery'], function(provide, BEMDOM, loader, $) {
    provide(BEMDOM.decl({ name: this.name, modName: 'api', modVal: 'ymaps' }, {
        onSetMod: {
            'js': {
                inited: function () {
                    this.loadMapsApi();
                }
            }
        },
    }));
});

Но если декларацию делать только по блоку, то всё работает

modules.define('map', ['i-bem__dom', 'loader_type_js', 'jquery'], function(provide, BEMDOM, loader, $) {
    provide(BEMDOM.decl(this.name, {
        onSetMod: {
            'js': {
                inited: function () {
                    this.loadMapsApi();
                }
            }
        },
    }));
});

bem-stub собирал через генератор

Решил переехать с bem-tools на enb. Склонировал project-stub, запустил сборку - страничка собралась. Запускаю dev сервер коммандой npm start и вижу привычный вывод bem server. Сборка проходит, но при изменении bemjson, index.html не меняется. Если делаю ./node_modules/.bin/enb make то html меняется. Вопрос: Как правильно запустить dev сервер используя enb?

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

Всем привет!

Начал изучать БЭМ CSS. Как я понимаю, блоки должны быть максимально независимы от контекста, в котором они используются., поэтому я при написании блоков выделяю «контекстно-зависимые» стили (margin/padding, переопределения стилей Bootstrap и т.д.) в отдельный блок и навешиваю его вместе с основным блоком на один элемент:

<div class="corp-offer-builder">
  <ul class="pager pull-right corp-offer-builder-ctx__nav">
    …
    <li class="lh-input corp-offer-builder-ctx__page-num">1 из 2</li>
    …
  </ul>
  <div class="btn-group corp-offer-builder-ctx__button_save">
    …
    <ul class="dropdown-menu">…</ul>
  </div>
</div>
.corp-offer-builder-ctx__nav {
  margin: 0;
}

.corp-offer-builder-ctx__page-num {
  padding: 0 10px;
}

.corp-offer-builder-ctx__button_save .dropdown-menu {
  left: auto;
  right: 0;
}

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

Всем привет!

А поделитесь кто может опытом отлавливания ошибок при исполнении BEMTREE и BEMHTML. BEMTREE мы исполняем в vm и передаем туда контекст. Так вот если там внутри vm случается фейл я не могу понять где. Это, конечно, сильно развивает мышление, но хочется иногда просто увидеть ошибку в консоль:)

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

В JavaScript код такой:

        var reposBEMJSON = this.repos.map(function(repo) {

            return {
                block: 'test',
                //elem: 'repo',
                content: '1111',
                info: {
                    name: repo.name,
                    url: repo.html_url
                }
            }
        });

        var html = BEMHTML.apply(reposBEMJSON)
        console.log(html);

https://github.com/varya/varya.github.com/blob/features/github-repos/desktop.blocks/github/github.js#L49

Зависимости по технологиям указываю: https://github.com/varya/varya.github.com/blob/features/github-repos/desktop.blocks/github/github.deps.js#L12

Судя по коду index.min.js шаблон всё-таки включен в сборку:

if(!__$ctx.elem&&__$ctx.block==="test"&&__$ctx._mode==="content"){__$ctx.__$a=0;return"XXXX"}

Но в консоль выводится undefined. В браузер приезжает свежий, незакешированной index.min.js — я проверила.

В чём может быть проблема и как дебажить дальше?

Привет!

Захотелось пользоваться BEMHTML шаблонами на клиенте, но получается ошибка can't resolve dependence "BEMHTML". Вот как объявляется зависимость https://github.com/varya/varya.github.com/blob/features/github-repos/desktop.blocks/github/github.js В deps вроде тоже всё прописано https://github.com/varya/varya.github.com/blob/features/github-repos/desktop.blocks/github/github.deps.js

Делаю по образу и подобию bem-components, но библиотеки у меня старые (https://github.com/varya/varya.github.com/blob/features/github-repos/bower.json). Обновляться не хочу, боюсь, что это принесет ещё больше проблем. Сборка на ENB https://github.com/varya/varya.github.com/blob/features/github-repos/.bem/enb-make.js

Как мне заставить мой bemhtml работать в браузере?

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

Для получения данных для блока bemtree используется следующий подход:

{
    block  : 'some-block',
    data-a : {
        controller : 'controller-a',
        action     : 'action-a',
        // ...
        // Data for action and models...
    },
    data-b : {
        controller : 'controller-b',
        action     : 'action-b',
        // ...
        // Data for action and models...
    }
}

Все эти данные, асинхронные или нет, обрабатываются до попадания в BEMTREE.apply.

Далее в блоке some-block имеются необходимые данные data-a и data-b - полученных из соответствующих контроллеров выполняющих необходимые действия.

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

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

Спасибо за внимание!

Есть в body тег select, содержащий список тем сайта, этот select я сделал блоком. При событие change у select, нужно менять значение href у тега link, содержащий url текущей темы. Для этого решил сделать link тем же блоком, что и select, используя параметр id, в общем вот, в head:

<link class="theme i-bem" data-bem='{"theme": {"id": "main"}}' rel="stylesheet" href="">

и в body

<select class="theme i-bem" data-bem='{"theme": {"id": "main"}}'>
  <option value="default" selected>Default</option>
  <option value="rock">Rock</option>
</select>

в декларации блока есть вот такой код, вызываемый при событие change у select:

this.domElem.filter('link').attr({'href': this.params.themeFullFileUrl});

Но не работает. А не работает потому, что, если вывести в консоль или алертом кол-во элементов this.domElem - возвращает 1, а не 2, хотя в документации сказано, что обе DOM ноды будут добавлены в this.domElem. В чем причина? Спасибо.

Добрый день.

:)

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

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

Привет! Подскажите пожалуйста, почему на элемент не устанавливается блок i-bem и модификатор js_inited? Вот декларация элемента:

modules.define('range__tooltip', ['i-bem__dom', 'jquery'], function (provide, BEMDOM, $) {
    provide(BEMDOM.decl({ block: 'range', elem: 'tooltip' }, {
            onSetMod: {
                js: {
                    inited: function () {
                        console.log('init tooltip');
                    }
                }
            }
        }
    ));
});

Если проблема не в этом куске кода, то вот ссылка на весь проект. Буду благодарен за помощь в решении проблемы :)

На одной ноде находятся два блока:

      <section class="siteSettings theme i-bem" data-bem='{"siteSettings": {}, "theme": {}}'>

В функции-инициализации блока theme происходит подписка на БЭМ событие changeTheme блока siteSettings. Внутри же функции-инициализации блока siteSettings происходит генерация события changeTheme. Но обработчик внутри блока theme не срабатывает, так как ещё не произошла инициализация блока theme, а лишь произошла инициализация блока siteSettings... Как побороть, может есть решения предлагаемые самим i-bem? Спасибо.

У меня приложение на ноде, с использованием enb. Я не хочу класть на layout шаблонов на ноду, потому что они уже в принципе есть в bemjson. Зачем мне их тянуть на стороны ноды, нельзя или их как-то переиспользовать?

Не знаю насколько хорошо или плохо создавать тему по такому маленькому вопросу, в общем, если не стоит создавать таких тем - скажите. Но в документации по i-bem в двух источниках не нашел ответа, в исходники заглянул, но один метод завязан на другом и т.д, поэтому разобраться займет много времени, а вопрос мелочный. Итак, к сути. Для генерации БЭМ событий блоков вызывается метод emit с указанием первым паметром названия события. Я из блока A нахожу нужный мне блок B и подписываюсь на его событие bEvent. Внутри блока B генерю событие bEvent this.emit('bEvent'). А как передать в emit данные?.. Пробовал вторым параметром - в объект события они не попадают. В документации тоже ни слова. Спасибо.

Всем привет!

Недавно взялся за изучение AngularJS по урокам с официального сайта, естественно пытаясь применить полученные знания в контексте БЭМ-методологии :) С интеграцией самого ангуляра в БЭМ-проект все более-менее понятно, а как обстоят дела с тестированием?

Погуглив по данному вопросу, наткнулся на доклад Александра Тармолова про юнит-тестирование в БЭМ, но так и не понял как настроить окружение enb/bem-tools для сборки и запуска тестов.

Стоит следующая задача: есть следующая структура

<div class="myBlock">
    <div class="myBlock__elem">
        <div>
            <a class="myBlock__link" href=""></a>
        </div>
        <div>
            <input class="myBlock__text" type="text" disabled>
        </div>
    </div>
    <div class="myBlock__elem">
        <div>
            <a class="myBlock__link" href=""></a>
        </div>
        <div>
            <input class="myBlock__text" type="text" disabled>
        </div>
    </div>
    <div class="myBlock__elem">
        <div>
            <a class="myBlock__link" href=""></a>
        </div>
        <div>
            <input class="myBlock__text" type="text" disabled>
        </div>
    </div>
</div>

Деллегированно вешаю обработчик клика для myBlock__link.

{
  live: function () {
    this.liveBindTo('link', 'click', function () {
      this._onLinkClick();
    });
    return false;
  }
}

в обработчике _onLinkClick мне нужно найти элемент myBlocktext, находящийся в одном и том же элементе myBlockelem, с ссылкой myBlocklink, по которой кликнули. Я думал делать это так: в обработчик _onLinkClick передается объект события, содержащий свойство e.currentTarget, в котором содержится ссылка, по которой кликнули. Используя ее я хочу найти родительский для этой ссылки элемент myBlockelem, затем в этом myBlockelem найти myBlocktext. Но методов для такого поиска в i-bem, судя по всему, нету. Есть обычные методы поиска элементов findElem и elem, но они ищут все подряд элементы, внутри блока, а мне нужно, чтобы они нашли элементы, содержащие внутри себя элемент из e.currentTarget. Как это делается, подскажите, пожалуйста.

Хочу прояснить для себя пару моментов по YM модульной системе, о которых не рассказывается в документации, буду крайне признателен:

1) В commonJS и AMD модульных системах при попытке обратиться к модулю, например, require('myModule', function(myModule){...});, если этого модуля нету на странице(если это браузер), то модульная система сама подгрузит с сервера файл этого модуля. Может ли YM сделать тоже самое?(Методом проб этого дообиться не удалось).

2) На habrahabr в статье про YM прочел, что есть специальный модуль loader у YM для подгрузки скриптов, но я так и не понял:

2.1) а кто будет подгружать на страницу сам этот модуль loader? Самому вручную добавлять этот модуль на страницу сразу после тега