@antonowano я уже давно всем обещаю, но все никак не закончу документ про трехзвенную архитектуру :(

Если в двух словах, то идея следующая. Проект в идеале делить на 3 части:

1. Бекенд (БД, данные на файловой системе, внешние http-API и так далее)
2. Фронтенд (это серверный слой, где данные, полученные от бекенда трансформируются в BEMJSON)
3. Клиент (здесь все, что про браузер)

Разумеется, разделение на первые два слоя — лишь удобный паттерн, код может быть написан хоть в одном файле. Главное, что нужно понять — это то, что необходим этап, на котором из сырых данных будут сформированы view-ориентированные данные (BEMJSON).

Сделать это можно как просто написав соответствующую функцию:

function buildBemjson(data) {
    return {
        block: 'page',
        content: [ /* ... */ ]
    };
}

так и применяя специальные технологии. Например, BEMTREE.

Более подробно об этом есть статья на bem.info.

https://github.com/express-bem/project-stub — можно начать вот так, например. Решение на базе express-bem, серверные блоки не присутствуют, но bemtree отрабатывает.

чувствую что нехватает матчасти. подскажите пожалуйста где подсмотреть простой пример. нужно чтобы на входе взять например такой JSON файл

{
    "cars" : {
        "toyota" : {
            "prius" : {
                    "colors" : {
                        "c1" : "qwe",
                        "c2" : "asd"
                    }
            },
            "camry" : {
                "colors" : {
                        "c1" : "123",
                        "c2" : "456"
                    }
            }
        },
        "mercedes" : {
                ...
        }
    }
}

и чтоб на выходе получить два блока select чтоб при выборе totyota во втором селекте появлялись камри и приус и пр выборе внизу появлялся список цветов.

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

content: [
        {
            block : 'select',
            mods : { mode : 'radio', theme : 'islands', size : 'xl' },
            name : 'select2',
            val : 0,
            options : [
                { val : 0, text : 'марка' }
                { val : 1, text : '1' },
                { val : 2, text : '2' },
            ]
        },
        {
            block : 'select',
            mods : { mode : 'radio', theme : 'islands', size : 'xl', disabled : true },
            name : 'select2',
            val : 0,
            options : [
                { val : 0, text : 'модель' }
            ]
        }
]

но это статика, а как выводить это из подобного файла.

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

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

если никто не доберется ответить раньше, сегодня к ночи оформлю пример

BEMTREE использовать можно, но совсем не обязательно. Вам надо определить собственный блок в i-bem.js, который будет иметь два дочерних селекта и блок menu для списка цветов, слушать изменения на селектах и менять содержимое списка второго селекта и списка цветов. В обоих случаях (select для моделей и список цветов) вам надо будет иметь дело с блоком menu и его методом setContent. Как декларировать свой блок и обращаться к дочерним можно изучить в документации и исходниках библиотеки bem-components.

@sosnovskyas сделал ветку demo1 в https://github.com/tadatuta/bem-bemtree-static-project-stub/tree/demo1 Код, релевантный конкретно вопросу про наполнение селектов данными, можно посмотреть в PR: https://github.com/tadatuta/bem-bemtree-static-project-stub/pull/4/files

Для запуска у себя:

git clone https://github.com/tadatuta/bem-bemtree-static-project-stub.git -b demo1
cd bem-bemtree-static-project-stub
npm i
npm start

И открывать в браузере http://localhost:8080/desktop.bundles/index/index.html

BEMTREE в данном случае работает так:

1. В модуле для сборки HTML https://github.com/tadatuta/bem-bemtree-static-project-stub/blob/demo1/.enb/techs/bemtreeToHtml.js#L52 вызывается BEMHTML.apply(), куда передается стартовый контекст (блока root) и данные (в примере просто читаются из data.json в корне проекта). Результат выполнения BEMTREE — это BEMJSON, который передается в BEMHTML.apply(), а результирующий HTML сохраняется на диск. В реальной жизни эта логика будет происходить в продакшен-сервере в ответ на HTTP-запросы.
2. Блок root пробрасывает данные вглубь по дереву (https://github.com/tadatuta/bem-bemtree-static-project-stub/blob/demo1/common.blocks/root/root.bemtree#L2) и заменяет себя на блок page.
3. В шаблоне page создаются блоки header, main и footer.
4. Основная логика происходит в main: https://github.com/tadatuta/bem-bemtree-static-project-stub/blob/demo1/common.blocks/main/

Если я не ответил на вопрос или возникнут новые — буду рад рассказать подробнее.

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

не понимаю как обратиться к JSON дереву чтоб сгенерировать ещё один уровень вложенности. примерно из такой вот структуры

 {
    "cars" : {
        "toyota" : {
            "prius" : {
                "2001" : {
                    "colors" : {
                        "c1" : "1",
                        "c2" : "2"
                    }
                },
                "2002" : {
                    "colors" : {
                        "c1" : "3",
                        "c2" : "4"
                    }
                },
                "2003" : {
                    "colors" : {
                        "c1" : "5",
                        "c2" : "6"
                    }
                }
            },
            "camry" : {
                "colors" : {
                        "c1" : "123",
                        "c2" : "456"
                    }
            }
        },
        "mercedes" : {
                "qwe" : "qwe"
        }
    }
}

чтоб получилось не два а три select. подскажите пожалуйста, для полной ясности нехватает этого момента :(

@sosnovskyas ну, например, вот так: https://github.com/tadatuta/bem-bemtree-static-project-stub/commit/81b947a7140db1c0262ff401bfe636d5da79e549

Но когда появляются такие развесистые структуры данных, есть смысл придумать модель и вместо прямого изменения DOM-а, вызывать события на модели, чтобы компоненты могли их слушать и сами себя изменять. Иначе код достаточно быстро превратится в кашу.

тоесть надо смотреть в сторону bem-mvc?

@sosnovskyas как вариант. но можно и что-то попроще.

например? я новичок и ещё не знаю всего стека технологий, потому и возникают такие вопросы.

@sosnovskyas начать можно хоть с обычного pub/sub на основе events__channels или взять любой сторонний модуль. Тут чего-то конкретно специфичного именно для БЭМ нет, поэтому можно выбирать что больше нравится.

а зачем блок root? не до конца понятно, ведь можно было в блоке page обратиться к контексту, разве нет? вобщем зачем дополнительный блок?

@sosnovskyas это задел на то, что дальше может захотеться сделать single page application и забирать через AJAX только нужные части страницы — им потребуются все те же данные, но не потребуется обвязка страницы. если же никаких таких планов нет, то, конечно, можно обойтись без root.

то есть root нужен для того чтобы грузить в него другие бандлы?

@sosnovskyas приведу пример использования на реальном проекте:

block('root').def()(function() {
    var ctx = this.ctx;
    // пробрасываем data вглубь по дереву
    this.data = ctx.data;

    // если задан context — требуется отрендерить не целую страницу, а лишь эту конкретную часть
    if (ctx.context) return applyCtx(ctx.context);

    // иначе рендерим весь page целиком
    return applyCtx({
        block: 'page',
        title: 'Заголовок',
        favicon: '/favicon.ico',
        styles: [
            {
                elem: 'css',
                url: '/_index.css'
            }
        ],
        scripts: [
            {
                elem: 'js',
                url: '/_index.js'
            }
        ],
        head: [
            { elem : 'meta', attrs : { name : 'viewport', content : 'width=device-width, initial-scale=1' } },
        ],
        mods: {
            theme: 'islands',
            view: ctx.data.view
        }
    });
});

попробовал использовать у select моду radio-check. следующим образом: в файле main.bemtree сделал так

    function buildSelect(name, options, needSelect) {
        return {
            block : 'select',
            mods : { mode : 'radio-check', theme : 'islands', size : 'xl' },
            mix : { block: 'main', elem: name },
            name : name,
            text : needSelect,
            options : options.map(buildSelectOption)
        };
    }

    return [
        buildSelect('car', carNames, 'select car'),
        buildSelect('model', firstCarModels, 'select model'),
        buildSelect('year', firstModelYears,  'select year'),
        {
            block: 'modal',
            mods: { theme: 'islands', autoclosable : true }
        }

в файле main.deps.js поправил так

[
    {
        shouldDeps : [
            'objects',
            {
                block : 'select',
                mods : { mode : 'radio-check', theme : 'islands', size : 'xl' }
            },
            {
                block: 'modal',
                mods: { theme: 'islands', autoclosable : true }
            }
        ]
    },
    {
        tech : 'js',
        shouldDeps : {
            block : 'select',
            mods : { mode : 'radio-check', theme : 'islands', size : 'xl' },
            tech : 'bemhtml'
        }
    }
]

и в начале всё хорошо

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

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

и пункты не кликабельны. соответственно следующий уровень не выбирается

почему, не пойму к сожалению

поправил файлик main.js вот так

   buildSelect: function(name, options) {
        return {
            block : 'select',
            mods : { mode : 'radio-check', theme : 'islands', size : 'xl' },
            mix : { block: this.block, elem: name },
            name : name,
            val : options[0],
            options : Object.keys(options).map(function(val) {
                return { val : val, text : val };
            })
        };

стало по лучше

@sosnovskyas я пока не вникал в вопрос, в результате все решилось или помощь еще нужна?

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

это происходит, т.к.

1. при выборе марки дергается onSelectChange (https://github.com/tadatuta/bem-bemtree-static-project-stub/blob/demo1/common.blocks/main/main.js#L18)
2. в onSelectChange написано, что если в this.car['название-модели'] пусто, то удаляется селект с годом (https://github.com/tadatuta/bem-bemtree-static-project-stub/blob/demo1/common.blocks/main/main.js#L40-L42)