Модульная система асинхронная, поэтому необходимо дождаться, пока будет предоставлены модули внутри вызова NewProcessForm. Решить проблему проще всего тем, чтобы показывать модальное окно прямо изнутри NewProcessForm после обновления контента.

Кстати, можно удалить все tag: 'div' — это значение по умолчанию, нет необходимости его писать вручную.

Но вообще тут бы весь код порефакторить.

Отлично!!! Большое спасибо, за оперативность. Насчет порефакторить, это безусловно.

Подскажите еще, пожалуйста как сделать такую конструкцию:

<button class="btn btn-primary pull-right button-submit" type="button">
    <span><i class="glyphicon glyphicon-ok"></i></span>
    Изменить
</button>

Собственно я ни как не могу понять, как написать просто текст "Изменить". Или в рамках методологии текст не может быть вне какого ни будь блока?

Текст — это просто строка :)

[
    { tag: 'blah', content: 'я текст внутри тега blah' },
    'а я просто текст :)'
]

Мда... все гениальное просто... Писать просто текст, я не сообразил.

Если Вы не против, то я в этой ветке еще по задаю вопросы.

Смотрите, как в такой конструкции обойтись без внешнего контента. То есть мне нужно сразу же в append добавлять результат функции. Я пробовал сразу же писать function, но тогда возникает ошибка

modules.require(['BEMHTML', 'i-bem-dom'], (BEMHTML, bemDom) => {bemDom.append(bemDom.doc.find('.c-kanban td[data-lavel="'+answer["d_lavel"]+'"]'), BEMHTML.apply({
            content: (function() { как это сделать без content
                var cards = [];
                var card_id;

Как можно избежать дублирования кода. У меня в контенте подряд идут несколько одинаковых по структуре блока block: 'b-combobox-field', но с разным содержимом. Как мне не дублировать html код. Сейчас я просто копирую текст блока и вставляю ниже, а по идее я должен вызывать какой-то паттерн или шаблон. Вот моя функция:

modules.require(['BEMHTML', 'i-bem-dom'], (BEMHTML, bemDom) => {

    bemDom.append(bemDom.doc.find('#place_modal_form'), BEMHTML.apply({
        content: [
            {
                block: 'b-combobox-field',
                content: [
                    {
                        tag: 'label',
                        cls: 'control-label',
                        content: 'Проект'
                    },
                    {
                        block: 'b-combobox',
                        js: true,
                        content: [
                            {
                                elem: 'id',
                                tag: 'input',
                                attrs: { type: 'hidden', name: jdata.Projects.Name, value: jdata.Projects.FirstID },
                            },
                            {
                                tag: 'button',
                                cls: 'btn btn-default dropdown-toggle',
                                attrs: { type: 'button', 'data-toggle': 'dropdown' },
                                content: [
                                    {
                                        elem: 'text',
                                        content: jdata.Projects.FirstValue
                                    },
                                    {
                                        elem: 'icon',
                                        tag: 'span',
                                        cls: 'glyphicon glyphicon-menu-down',
                                        attrs: { 'aria-hidden': 'true' }
                                    }
                                ]
                            },
                            {
                                elem: 'list',
                                tag: 'ul',
                                cls: 'dropdown-menu',
                                content: (function() {
                                    var li = [];

                                    if (! $.isEmptyObject(jdata.Projects.List)) {
                                        jdata.Projects.List.map(function(item) {
                                            li.push({
                                                elem: 'list-item',
                                                tag: 'li',
                                                attrs: { 'data-id': item.ID },
                                                content: item.Name
                                            });
                                        });

                                    }
                                    return li;
                                })()
                            }
                        ]
                    }
                ]
            },
            {
                block: 'b-combobox-field',
                content: [
                    Тут идет такая же структура, как в блоке выше.
                ]
            },
                        Тут идут такие же блоки
        ]
    }));

});

Без content-а должно быть в точности так же, как с ним :) BEMHTML.apply() в качестве аргумента может принимать строку, объект или массив. Если нужно сделать какие-то вычисления, то их можно сделать либо перед вызовом BEMHTML.apply(), сохранить в переменную результат и передать уже эту переменную, либо действительно сделать самовызывающуюся функцию, которая будет возвращать нужный результат. Это будет работать.

Если бы был полный листинг вызова, я смог бы ответить, почему возникает ошибка.

По второму вопросу есть 2 варианта:

1. Сделать самый обычный JS map — написать короткий массив с данными и смаппить его на нужную структуру.
2. Написать BEMHTML-шаблон для блока b-combobox-field и использовать его.

Спасибо, большое. По поводу вопроса без внешнего контента, я разобрался. По поводу дублирования кода, буду разбираться с BEMHTML и формировать новые вопросы :)

Добрые день. Подскажите, пожалуйста в чем разница между декларацией

modules.define('b-new-task', ['i-bem-dom'], function(provide, BEMDOM) { provide(BEMDOM.declBlock(this.name, {

и вот этой (эту я увидел вот на этом бэминаре https://www.youtube.com/watch?v=OBjKCY3TiJg)

modules.define('b-new-task', ['i-bem__dom'], function(provide, BEMDOM) { provide(BEMDOM.decl(this.name, {

Я понимаю, что в первом случае используется блок 'i-bem-dom, а во втором случае используется элемент 'i-bem__dom' библиотеки bem-core.js+bemhtml.js.

Сейчас я подписываюсь на события вот так: modules.define('b-new-task', ['i-bem-dom'], function(provide, BEMDOM) {

provide(BEMDOM.declBlock(this.name, {
    onSetMod : {
        'js' : {
            'inited': function() {
                this._domEvents().on('click', this._onClick);
            }
        }
    },

    _onClick: function() {
        var msg = {
            action_name: "NewTaskForm",
            user_id: $('input[name="user_id"]').val()
        };

        ws.send(JSON.stringify(msg));
    }
}));

});

Отсюда возникает втрой вопрос, а как правильнее: this._domEvents().on('click', this._onClick); или this.bindTo('click', function() {}) Смущает, то что у меня не работает так, как описано в бэминаре (через bindTo).

@mamatkazin https://github.com/bem/bem-core/blob/v4/MIGRATION.ru.md#Изменения-в-блоке-i-bem

Большое спасибо!

Возвращаюсь к вопросу дублирования кода от 5 мая.

"#tadatuta 5 мая 2017 Написать BEMHTML-шаблон для блока b-combobox-field и использовать его."

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

Нет необходимости вставлять результат шаблонизации в JSON-структуру.

Если написать BEMHTML-шаблон для блока b-combobox-field, то это позволит не копипастить повторяющиеся части в BEMJSON-е, который передается на вход в BEMHTML.apply(bemjson).

А результатом вызова BEMHTML.apply() в любом случае является HTML-строка, которая и вставляется в DOM-дерево. Так что здесь никаких отличий не будет.

Я правильно понимаю, что в самом начале у меня нет ни какого DOM дерева. Это дерево формируется благодаря вызову вот в этой конструкции (она была описана выше)

modules.require(['BEMHTML', 'i-bem-dom'], (BEMHTML, bemDom) => { bemDom.append(bemDom.doc.find('#place_content'), BEMHTML.apply({})})

Сейчас у меня в ней идут повторяющиеся куски кода.

Я правильно понимаю, что теперь мне нужно убрать эти куски кода, а оставить вместо них пустые блоки b-combobox-field. Таким образом в результирующем DOM дереве будут пустые узлы b-combobox-field.

А заполнятся они благодаря вызову BEMHTML-шаблона. И вот дальше у меня идет "разрыв в понимании". Каким образом мне в BEMHTML-шаблоне указать, что нужно сформировать не автономную html строку, а вставить данные в результирующее дерево.

Например, я создаю BEMHTML-шаблон: var templates = bemxjst.bemhtml.compile(function() { block('header').tag()('h1'); });

Вот тут я на вход подаю bemjson, который я сформирую var html = templates.apply(bemjson);

На выходе у меня получается HTML строка.

Владимир, пожалуйста, не бросайте меня :)

@mamatkazin

Я же правильно понимаю, что речь идет о проекте на базе project-stub?

Там все организовано таким образом, что шаблоны автоматически попадут на клиент, если указать нужные блоки в deps-файлах специальным образом:

[
    {
        shouldDeps: [/* здесь обычные зависимости */]
    },
    {
        tech: 'js', // зависимости только для клиентского js
        shouldDeps: [
            {
                block: 'b1',
                tech: 'bemhtml' // собирает шаблоны для блока b1
            }
       ]
    },
]

Подробнее здесь: https://ru.bem.info/platform/deps-spec/#Поле-определяющее-технологию-реализации-БЭМ-сущности

Т.е. необходимо создать BEMHTML-файл с нужным шаблоном, прописать его в депсах и дальше звать просто BEMHTML.apply().

В самом шаблоне для экономии копипаста потребуется режим content(), а необходимые данные можно передавать через входной BEMJSON.

Подробности о шаблонах тут https://ru.bem.info/platform/bem-xjst/

Не знаю насколько это отвечает на вопрос...