Подскажите правильную реализацию меню, сделал несколько вариантов для теста, результатом не удовлетворен=) Стоит ли использовать блоки из bem-components? или стоит писать свое?

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

block input, elem samples, elemMod theme 'ordered-list' {
    tag: 'ol',

    default: {
        applyNext();
        this.orderedlistSample = true;
        return this.orderedlistSample
    }
}

Второй шаблон:

block input, elem sample, this.orderedlistSample {
    tag: 'li'
}

К сожалению так не работает :( Как можно решить эту задачу?

Сейчас в основном, все что касается html (тэги, атрибуты) я обрабатываю в bemhtml, остальное в bemtree. А если мне понадобятся эти же преобразования на клиенте, то их надо будет перенести в bemhtml или возможно шаблоны bemtree по депсам включить в собираемый js? Или все же bemtree это чисто серверная технология?

К примеру одно из обычных преобразований:

block('custom-menu').elem('item')
(
    def()(function () {
        var ctx = this.ctx;

        return applyCtx({
            block : 'link',
            url   : ctx.url
            mix   : {
                block: this.block,
                elem:  this.elem
            }
            content : ctx.content
        })
    })
)

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

Добрый день.

Если добавить модификтор блока из вне, то как сообщить i-bem о изменениях?

Есть блок А у него элемент __k, при нажатии на который у блока A убирается модификатор _display.

Но при нажатии на одно поле на странице - этому блоку добавляется класс A_display. После этого элемент __k не скрывает блок, т.к. думает, что он скрыт (результат кэширован).

Какое решение можете подсказать?

П.Н. Страница частично на БЭМе (в будущем видно будет, но сейчас так).

Задача. Есть такой bemjson

    {
      block:'nav-menu',
      items:[
         {block:'link'},
         {block:'link'},
         {block:'link'},
       ]
    }

По клику на ссылках, нужно прокручивать страницу. Для этого нужно подписаться на клик. Сейчас это сделано так:

BEMDOM.blocks['link'].on(this.domElem,'click', this._scrollto, this);

При этом, отрабатывает обычный клик, потом отрабатывает прокрутка. визуально страница быстро дергается к якорю, возвращается на исходную, и плавно прокручивается. Проблему можно решить подписавшись на DOM событие click. Но, некоторые ссылки могут быть disabled . Ожидается, что по клику на обычной ссылке будет прокрутка, по отключенной, ничего не произойдет. Как совместить эти события не дублируя функциональность блока link? На всякий случай приведу метод _scrollto:

_scrollto: function(e){
    var url = e.target.getUrl();
    var to = $(url).offset().top - this.offset;
    $('html, body').animate( {scrollTop: to}, this.speed );
    return false;
}

Есть шаблон который переопределяет тег:

block input, elem samples, elemMod logins yes{
    tag: 'ol',
}

нужно так же что бы он удалял wai-атрибут role, определенный в другом шаблоне. Как этого добиться? Использовать apply()?

Не хотелось бы изобретать велосипед, думаю уже ни раз написано.

Хотелось бы увидеть, что то вроде блока dropdown из bem-components, но чтобы попап отображался при наведении, а не при клике.

Спасибо!

Где можно применить этот инструмент на практике и как? может есть примеры проектов.

Какая разница между этими технологиями?

Есть ли пример как организовать приложение с использованием шаблонизаторов bemhtml или bh с bemhistory на клиенте? Цель реализовать проект одностраничного приложения польность по БЭМ методологии и с использование минимального количества внешних библиотек.

Привет всем! В общем хочу динамически добавлять блоки на страницу. Использую этот пример из документации: Динамическое обновление блоков и элементов в DOM-дереве. Вот мой код:

modules.define('search-form', ['BEMHTML', 'i-bem__dom'], function(provide, BEMHTML, BEMDOM) {
    provide(BEMDOM.decl(this.name, {
            query : "",

            cities : [],

            onSetMod: {
                js: {
                    inited : function() {
                        this.findBlockInside('input').on('change', this._onChange, this);
                        BEMDOM.append(
                            this.domElem,
                            BEMHTML.apply({
                                block : 'button',
                                text : 'Кнопка'

                            })
                        );
                    }
                }
            },

            _onChange : function (event) {
                this.query = event.target._val;
                if (this.query.length < 2) return;
      },

            _filterCities : function (city) {
                return city.toLowerCase().indexOf(this.query.toLowerCase()) === 0;
            }
        },
        {}
    ));
});

Но блок просто не добавляется. Что я не так делаю? P.S. Для создания проекта использовал yoman generator

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

Практически у каждого разработчика есть своя библиотечка с блоками, пусть и не такая качественная, как bem-components. Было бы здорово собрать информацию о таких библиотеках, или даже отдельных блоках, в одном месте. Что думаете об этом?

Подскажите, пожалуйста. На своем проекте я настроил грант и хочу подключить в проект bem-core ради фрэймворка i-bem.js, и подключить bem-components ради блока дропдауна. Скажите, можно ли будет подключить эти библиотеки, не используя ваши сборщики? Просто отдельно подключить i-bem.js не хочу, хочу именно тот, который находится в bem-core т.к. хочу использовать ym модульную систему. В чем стал вопрос? В том, что у вас парадигма уровней переопределения и, если я подключу какую-нибудь библиотеку, а та в свою очередь переопределяет js библиотеки, которая находится на уровне переопределения ниже, то как это все подключить не используя вашего сборщика? Надеюсь, вы уловили суть вопроса, если что, я дополнительно поясню, спасибо.

Подскажите как в i-bem правильно отслеживать например клик вне блока или элемента в jQuery это выглядит примерно так

$(document).on("mouseup touchend", function (event) {
// условие
});

Например нужно закрыть попап при клике вне его

При работе с модификаторами i-bem если использовать конструкцию вида

this.setMod(this.elem('menu'), 'selected');

То ничего не произойдет, но если добавить

this.setMod(this.elem('menu'), 'state', 'selected');

То модификатор добавится

Подскажите пожалуйста как работать с булевыми модификаторами

Ответа на форуме не нашёл.

Как получить данные при клике на элемент? Как их прописывать необходимо?

Сейчас делаю подобную схему:

this.bindTo(this.elem('btn'), 'click', function(e, data) {
    var type = this.getMod($(e.target), 'type'));
    ...
})

Но такое чувство что нужно иначе. type хранить в другом виде

.... сейчас сделал так

this.bindTo(this.elem('btn'), 'click', function(e, data) {
    var type = $(e.target).attr('data-type');
    ...
})

но вот на сколько это TRUE решение?

Есть у кого-нить готовый слайдер контента, наподобие bxslider? Нашел блок b-slider в bem-bl на уровне touch-pad, На проекте используется bem-core и, я так понимаю, что блоки из bem-bl не будут корректно работать?

Как выбрать необходимый элемент из элементов блока по атрибуту data-* с каким-то значением и присвоить модификатор активности? т.е.

есть подобная структура

{
    block: 'menu',
    content: [
        {
            elem: 'item',
            attrs: {'data-id': 4}
        },
        {
            elem: 'item',
            attrs: {'data-id': 2}
        },
        {
            elem: 'item',
            attrs: {'data-id': 9}
        },
        {
            elem: 'item',
            attrs: {'data-id': 1}
        }
    ]
}

как выбрать элемент с data-id = 2 ?

Здравствуйте , матерые бойцы методологии БЭМ ! )) Вот столкнулся с проблемой , прочел документацию узнал про bem-tools и enb и встал в ступор , че из них юзать? Потом прочел все про bemhtml все чудно! И тут ниже я прочел про bh , что использовать? Что профитнее всего ?

Не получается инициализировать блок

modules.define('b-map-filter-bar', ['i-bem__dom'], function(provide, BEMDOM) {

BEMDOM.decl(this.name, {
    onSetMod: {
        'js' : {
            'inited' : function() {
                // this.setMod('display', true);
                console.log('init');
            }
        }
    }
});

provide(BEMDOM);

});

bemjson

...
{
    block: 'b-map-filter-bar',
    mix: [{block: 'i-bem'}],
    // mix: {block: 'b-map', elem: 'filters-bar'},
    mods: {'theme': 'tosecond', 'display': false, 'js': 'inited'},
    content: [
        {
            elem: 'ctrl',
            // mods: {'theme': 'first'},
            content: 'текст'
        },
        {
            elem: 'shadow'
        }
    ]
}
...

в консоль после загрузки страницы ничего не попадает

сам файл _index.js подключён

Делаю по инструкции, https://ru.bem.info/tutorials/start-with-project-stub/ на git rm -rf .git fatal: pathspec '.git' did not match any files

Я прочитал https://ru.bem.info/tools/bem/bem-naming/

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

var csswizardry = bemNaming({
    elem: '__',
    mod: '--'
});

по-умолчанию