Есть несколько блоков menu вложенных друг в друга. Обычное многоуровневое меню. Хочу чтобы верхний уровень знал только о своих непосредственных menu-item и не влиял на вложенные меню. Как найти только непосредственно вложеные блоки? И сразу еще вопрос. Хочу чтобы блок menu инициализировался по bem-событию в непосредственно вложенных в него menu-item В jsdoc нашел liveInitOnBlockInsideEvent ( event, blockName, [callback] ) protected но меня смущает что метод protected

Всем привет!

Я только учусь и все пытаюсь разобраться с i-bem.

1. Как правильно воспроизвести такую логику: есть два блока, первый из них через JavaScript влияет на другой. Например, кнопка меню на мобильной версии сайта показывает и скрывает меню. Я хотел сделать таким образом, первому блоку передаются параметры, название блока и id, над которым будут совершаться какие-то действия:

            js: {
                toggledBlock: {
                    block: 'nav',
                    id: 'menu'
                }
            }

Дальше я пытаюсь по этим данным найти блок:

var targetID = this.params.toggledBlock.id;
var targetBlock = this.params.toggledBlock.block;
var toggledBlock = this.findBlocksOutside(targetBlock).filter(function(block) {
    return block.params.id = targetID;
});

Эти блоки у меня стоят рядом; findBlocksOutside ничего не находит, остальные методы findBlock(s)* тоже ничего не находят. У меня возник такой вопрос, почему же вообще существуют такие методы как findBlocksOutside, findBlocksInside, findBlocksOn, не противоречат они самой методологии, что блок должен знать где находится другой блок? Не проще ли иметь метод find, который просто находит необходимый блок в независимости от местаположения? Как же правильно решить задачу с меню, и как правильно применять методы findBlock*?

1. Второй вопрос по документации по i-bem, можно ли как-то ее понять? =) Сколько я ее не читал, так я с ней и не подружился. Можно ли найти примеры использования методов i-bem? Каждый раз как я пытаюсь написать что-то на JavaScript я застапариваюсь на простых вещах. Например метод this.setMod([elem], modName, modVal), я бился несколько часов пытаясь проставить модификатор элементу:

this.setMod('elem', 'someMod', 'itsValue');

В первый раз, когда используешь этот метод, хочется написать именно таким образом, и в голову не приходит, что на месте 'elem' должен быть явно указанный элемент, this.elem('elem'). В документации при первой встречи метода setMod ничего не сказано про то, что же передается этому методу. У меня каждый раз возникают проблемы при использовании какого-то методы i-bem. Кажется из названия метода ясно как он работает, пытаешься его использовать, понимаешь, что понятия не имеешь как он работает, лезешь в документацию, в документации ничего не написано.

Также возникает вопрос, если есть методы findBlocks*, которые возвращают массив блоков, то почему нет метода, который возвращает массив элементов?

Как известно у ZF своя файловая структура, и поэтому bem-tools нужно адаптировать под эту самую структуру, как?

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

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

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

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

https://github.com/SilentImp/VacayKit — репозиторий. http://silentimp.github.io/VacayKit/ — проект собран в gh-pages

Интересуют комментарии по поводу всего. И bem. И сборщика. И скриптов. И бананчика.

С уважением. Антон.

modules.define(
    'i-bem__dom',
    ['BEMTREE', 'BEMHTML', 'vow'],
    function(provide, BEMTREE, BEMHTML, Vow, BEMDOM) {
        provide(BEMDOM.decl(this.name, {}, {
            applyBemjson : function(bemjson, ctx, useBemtree) {
                var promise;
                if (useBemtree) {
                    promise = BEMTREE.apply(bemjson)
                } else {
                    var deferred = Vow.defer();
                    deferred.resolve(bemjson);
                    promise = deferred.promise();
                }

                return promise
                    .then(function(bemjson){
                        BEMDOM.update(ctx, BEMHTML.apply(bemjson));
                    })
            }
        }))
    });

Ок или что-то не так?

Подскажите пожалуйста. Как отправить POST без form, по событию на bem-components? С помощью deps, к своему блоку подключил я select из bem-components. А как теперь правильно получить выбранное значение из select-а? И например с помощью ajax отправить POST.

Суть: получить виртуальное 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

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

Всем привет!

Начинаю изучать BEM, пытаюсь поработать с библотекой bem-forms. Библиотеку подключил, прописал путь до библиотеки в .bem/make.js. BEMHTML библиотеки отрабатывает, html-tag формы преобразуется из div в form. Не получается доопределить поведение формы в JavaScript. Пытаюсь сделать это следующем образом, как указано здесь.

modules.define('form', function(provide, Form) {
    provide(Form.decl({
        onSetMod: {
            'js': {
                'inited': function() {
                    console.log('form started ...');
                }
            }
        }
    }));
});

При этом поведение блока button из библиотеки bem-components таким же образом переопределить получается. Использую bem-tools и project-stub.

Пока писал, заметил, что у формы не проставляется модификатор js_inited. Как можно поправить? В BEMJSON явно указал js: true, но ничего не происходит.

P.S. И не большой вопрос, при создании нового блока, bem-tools создает файл blockName.browser.js. Что значит browser.js? Чтобы указать, что в файле клиентский код?

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

Всем доброго времени суток :)

Поискал по форуму и не нашёл ответа на свой вопрос.

Нужно инициализировать добавленные блоки через Ajax в i-bem.

С сервера планируется получать нужные блоки в виде готового html Как правильно сказать i-bem о том, что их нужно инициализировать?

Всем привет.

Попробовал использовать библиотеку bem-forms в проекте на базе bnsf. Однако, при изменении значений в полях ввода ни у блока form-field, ни у блока input, ни у блока message не появляется модификатора invalid. Да и вообще, судя по всему, блок validation не инициализируется. Я только начинаю изучать БЭМ, поэтому у меня есть подозрение, что ошибка скорее в моем коде, нежели в bem-forms или bnsf.

В связи с этим у меня есть несколько вопросов.

1. В какой стадии разработки находится библиотека bem-forms?
2. Если библиотека bem-forms готова для практического использования, где я мог ошибиться?
3. Есть ли какой-нибудь инструментарий для инспектирования в браузере состояния блоков, не имеющих DOM-представления?

Спасибо!

BEMTREE-шаблон страницы с формой: https://github.com/narkq/bnsf-form-example/blob/4900760f8d797cc7a4df950f73043fcfcbaf779f/desktop.blocks/page-registration-step1/page-registration-step1.bemtree#L38-L71

Привет! Можно ли определить поведение блока с определенным модификатором с DOM-определением? Если я добавляю ['i-bem__dom'] в декларацию блока в JavaScript, то код перестает отрабатывать.

Пример BEMJSON:

{
    block: 'someblock',
    mods: {
        somemod: 'somevalue'
    },
    js: true,
    content: [
        'block content'
    ]
}

Пример JavaScript:

modules.define('someblock', ['i-bem__dom'], function(provide, BEMDOM) {
    provide(BEMDOM.decl({modName: 'somemod', modVal: 'somevalue'}, {
        onSetMod: {
            'js': {
                'inited': function() {
                    console.log('someblock inited with mod!');
                }
            }
        }
    }));
});

В репозитории на базе project-stub с использованием bemtree, bemhtml и i-bem я собираю несколько универсальных компонентов на базе bem-components. Репозиторий с помощью bower подключается к проекту на angularjs (собираемого browserify). Задача которую надо решить: доступ к bemtree, bemhtml и i-bem внутри angular директив и прочих сервисах.

Для начала я не смог подружить собранный js файл с browserify (хотя не уделил этой проблеме должного внимания). Пока остановился на варианте подключать его между самим angular.js и собранным browserify бандлом. Буду благодарен если кто-то подскажет более красивое решение.

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

angular.module('asyncModules', [])
    .provider('modulesResolver', function modulesResolverProvider() {
        var modules = [
            // modules should be also defined in App dependencies
            require('./kgBem.js').resolve
        ];

        this.$get = function modulesResolverFactory($q) {
            return $q.all(modules);
        };
    });

В kgBem.js я извлекаю модули из ymodules и размещаю их в angular. Экспортирую промис для вышеописанного модуля

var initInjector = angular.injector(['ng']);
var $q = initInjector.get('$q');

var deferred = $q.defer(),
    resolve = deferred.promise;

// modules should be loaded by kg-bem-components dist.js before application js
modules.require(
    ['BEMTREE', 'BEMHTML', 'i-bem__dom', 'kg-appbar'],
    function (BEMTREE, BEMHTML, BEMDOM) {
        angular.module('kgbem', [])
            .value('bemtree', BEMTREE)
            .value('bemhtml', BEMHTML)
            .value('bemdom', BEMDOM)
            .directive('kgAppbar', kgAppbar);

        function kgAppbar($compile, bemtree, bemhtml, bemdom, routehelper) {
            // template for appbar
            var appbar = {
                block: 'kg-appbar',
                attrs: {'ng-if': 'factory.currentUser'},
                title: '{{factory.appbarTitle.getText()}}',
                controls: [
                    //{ elem: 'bookmarks' },
                    {
                        elem: 'menu',
                        items: routehelper.menuItems['main'],
                        systemItems: routehelper.menuItems['system']
                    }
                ]
            };

            function linker(scope, element) {
                bemtree.apply(appbar).then(function (bemjson) {
                    element.html(bemhtml.apply(bemjson));
                    bemdom.init(element);
                    $compile(element)(scope);
                });
            }

            return {
                link: linker
            }
        }

        deferred.resolve();
    });
module.exports.resolve = resolve

Ну и при бутстрапинге ожидаю разрешения промисов модуля asyncModules.

var initInjector = angular.injector(['ng', 'asyncModules']);

initInjector.get('modulesResolver')
    .then(function(){
        angular.bootstrap(document, ['factoryApp']);
    });

Вопрос по сути тот же. Насколько это правильно и есть ли более прямые пути?

Добрый вечер!

Прошел воркшоп do-it-yourself и возник вопрос. В ходе всего воркшопа создается по-сути одна страница. А можно ли создать новую страницу рядом с исходной index (которая создается по умолчанию), и сделать ссылки между ними?

Спасибо!

Всем привет, сегодня я прошел курс - https://ru.bem.info/tutorials/start-with-project-stub/ Все получилось. Спасибо за руководство. У меня зреет задача создать (обновить) фронтенд сайта фирмы (5 страничек). Что я хочу:

1. Использовать шаблонизатор bemhtml.
2. Использовать императивный jquery! =) По возможности полностью отключить i-bem.js
3. Получать на выходе полный Не минифицированный html.
4. Объединить стили всех страниц на выходе в 1 файл. (у меня их всего 5 так что не хочу подключать для каждой странички отдельные стили)

Всем доброго времени суток. Пробую разбираться в строительстве готовых, сверстанных страниц, при помощи bem-tools. И привлек внимание небольшой нюанс в следующем блоке:

   block : 'select',
      mods : { mode : 'radio', theme : 'islands', size : 'l' },
      name : 'select1',
      val : 2,
      options : [
          { val : 1, text : 'Раз' },
          { val : 2, text : 'Два' },
          { val : 3, text : 'Три' }
      ]
    ...

Вот такой html получается:

<div class="select select_mode_radio select_theme_islands select_size_l i-bem select_js_inited" data-bem="{&quot;select&quot;:{&quot;name&quot;:&quot;select1&quot;}}">
    <input class="select__control" name="select1" value="2" type="hidden">
       <button class="button button_size_l button_theme_islands button__control select__button i-bem button_js_inited _popup-destructor_js_inited" data-bem="{&quot;button&quot;:{}}" role="button" type="button">
          <span class="button__text">Два</span>
          <i class="icon select__tick" aria-hidden="true"></i>
       </button>
</div>

Далее смотрю на стили элемента

.select_theme_islands .select__tick {
   background-image: url('../../libs/bem-components/design/common.blocks/theme/_islands/arrow.svg');
...
}

А перенесенная страница в другой каталог этот svg уже не нашла конечно.

Но это ведь в уже собранных файлах o_O .bem/make.js

process.env.YENV = 'production';

На этой странице использовался только один компонент, но если их несколько... В ручную копировать элементы компонентов, переписывать их url в стилях и т.п. Или есть какие-то проф хитрости которые предстоит изучить?

Хочется получить готовый index.html, _index.js, _index.css и отправить их дальше по конвейеру, отдельно от node-js и bem-tools. Помогите пожалуйста независимо подгрузить "пимпочка.svg" в select bem-core после сборки.

Так же, косвенно есть второй вопрос, возможно его суть как-то повлияла на предыдущий результат. Каталог проекта я собирал с помощью утилиты yo bem-stub. Все движения при сборки повторял за Женей Константиновым, из видео по BEMup в Москве. Но след в след не вышло т.к. yo bem-stub предлагал небольшой список компонентов. bem-components я выбрал, но к примеру bem-core не было среди вариантов далее. И стреди технологий было совсем небольшое колличество, нежели в видео. Если точнее то это все технологии что предлагаются:

? Choose technologies to be used in the project: 
 ◯ BEMJSON
 ◯ ie.css
 ◯ ie8.css
 ◯ ie9.css
❯◯ BEMTREE
 ◯ node.js
 ◯ browser.js+bemhtml

а как же ie6? )) Или другие.