Шаблонизация на клиенте

[AndreyGladkov]

Хочется получая ajaxом(bemjson(Данные) - блока), прогнав его через bemhtml получить исходный html Делать это все добро надо на клиенте. Есть ли такая возможность?

[tadatuta]

Да, разумеется.

modules.define('b1', ['i-bem__dom', 'BEMHTML', 'jquery'], function(provide, BEMDOM, BEMHTML, $) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                var $b1 = this.domElem;

                $.get('http://path/to/data').then(function(bemjson) {
                    BEMDOM.update($b1, BEMHTML.apply(bemjson));
                });
            }
        }
    }
}));

});

Чтобы нужные BEMHTML-шаблоны попали в клиентский JS, нужно добавить их в зависимости. Подробнее см. https://ru.bem.info/technology/deps/about/#Подключение-зависимостей-по-технологии

[AndreyGladkov]

@tadatuta Вот это просто супер, спасибо тебе большое!

[AndreyGladkov]

Не совсем понял с зависимостями

({
    mustDeps: [
        {
            block: 'events-list',
            tech: 'js',
            mustDeps: [
                {
                    block: 'events-list',
                    tech: 'bemhtml'
                }
            ]
        },
        {block: 'img', mods: {responsive: true}},
        {block: 'events-list', elem: 'item'},

    ]
})
//Так тоже пробовал
({
    mustDeps: [

                {block: 'events-list', tech: 'bemhtml'},
        {block: 'img', mods: {responsive: true}},
        {block: 'events-list', elem: 'item'},

    ]
})

Но метод BEMHTML.apply(bemjson) в переменой bemjson - записан BEMJSON блока events-list для теста, возвращает undefined, я полагаю он должен html вернуть.

[Guria]

([
// обычные зависимости текущего блока
{
    mustDeps: [
        {block: 'img', mods: {responsive: true}},
        {block: 'events-list', elem: 'item'}
    ]
},
// зависимость технологии js текущего блока от технологии bemhtml блока events-list
{
    tech: 'js',
    shouldDeps: [
        {
            block: 'events-list',
            tech: 'bemhtml'
        }
    ]
}
])

[AndreyGladkov]

@Guria спасибо, Вопрос следующий откуда BEMHTML.apply(bemjson) знает какой шаблон подключить если их несколько указано в deps.js? Мне активно возвращается undefined Вот test.js:

modules.define('test', ['i-bem__dom', 'BEMHTML', 'jquery'], function(provide, BEMDOM, BEMHTML, $ ){
    provide(BEMDOM.decl(this.name,{
        //методы экземпляра блока
        onSetMod:{
            'js': {
                'inited': function(){
                    var request =
                        {
                            block: 'events-list',
                            items: [
                                {
                                    title: 'Санкт-Петербург',
                                    subtitle: '16 июля 2015, 15:30',
                                    content: 'текст',
                                    count: '98',
                                    img: '/img/events/logo/event-logo.jpg',
                                    date: '2',
                                    month: '8'
                                },
                                {
                                    title: 'Санкт-Петербург',
                                    subtitle: '16 июля 2015, 15:30',
                                    content: 'текст2',
                                    count: '98',
                                    img: '/img/events/logo/event-logo.jpg',
                                    date: '20',
                                    month: '8'
                                },
                                {
                                    title: 'Санкт-Петербург',
                                    subtitle: '16 июля 2015, 15:30',
                                    content: 'текст3',
                                    count: '98',
                                    img: '/img/events/logo/event-logo.jpg',
                                    date: '21',
                                    month: '8'
                                }
                            ]
                        },

                        eventsList = this.domElem;

                    BEMDOM.update(eventsList, BEMHTML.apply(request));

                }
            }
        }
    }))
});

deps.js - файла test.deps.js

([
    {
        mustDeps: [
            {block: 'img'},
            {block: 'img', mods: {responsive: true}},
            {block: 'events-list', elem: 'item'},
            {block: 'events-list', elem: 'title'},
            {block: 'events-list', elem: 'subtitle'},
            {block: 'events-list', elem: 'content'},
            {block: 'events-list', elem: 'count'},
            {block: 'events-list', elem: 'date'},
            {block: 'events-list', elem: 'link'},
            {block: 'events-list', elem: 'calendar'},
            {block: 'jquery'},
        ]
    },
    {
        block: 'events-list',
        tech: 'js',
        mustDeps   : [
            {
                block: 'events-list',
                tech: 'bemhtml'
            }
        ]
    }
])

подозреваю что я bemjson не так отдаю

[AndreyGladkov]

Нет зависимости не указал i-bem, вопрос отпал)