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

Форум /

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

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

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

10 years ago

apsavin

BEMHTML можно использовать на клиенте. в i-bem__dom есть методы, которые вставляют строки в DOM и инициализируют блоки, получившиеся в результате.

10 years ago

tadatuta

@KondakovArtem можно добавить необходимые шаблоны на клиент и генерировать разметку в рантайме.

В label.deps.js добавить

[
    {
        tech: 'js',
        shouldDeps: [
            { block: 'label', tech: 'bemhtml' }
        ]
    }
]

Читается пример как «Технология js данного блока зависит от технологии bemhtml блока label» (в данном случае — самого себя).

После этого, если правильно сконфигурирована сборка (примером может служить https://github.com/bem/project-stub/tree/bem-core/.enb/make.js) шаблоны станут доступны в виде модуля:

modules.define('my-block', ['i-bem__dom', 'BEMHTML'], function(provide, BEMDOM, BEMHTML) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        {
            js: {
                inited: function() {
                    this.bindTo('click', function() {
                        BEMDOM.append(this.domElem, BEMHTML.apply({ block: 'label', content: 'моя новая метка' }));
                    });
                }
            }
        }
    }
}));

});

Чтобы оставлять комментарии, необходимо авторизоваться.