Вызов модального окна

Добрый день.

Ситуация следующая: На форму через сокетное соединение приходит json с данными. Я преобразую его в массив и смотрю что за данные ко мне пришли. Затем в зависимости от того, что пришло идет вызов тех или иных функций. Например в данном случае, я формирую модальное окно и заполняю его данными в функции NewProcessForm(answer['data']), а затем вызываю его с помощью команды modal('show’). Модальное окно я вызываю с помощью фреймворка Bootstrap, а формирую я его согласно БЭМ.

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

.ws.onmessage = function(e) {

    answer = JSON.parse(e.data);
    if (answer["action_name"] == "NewProcessForm") {
        NewProcessForm(answer["data"]);

                setTimeout(function () { 
                    $('#place_modal_form').modal('show'); 
                }, 1000);
    }
}
function NewProcessForm(json_data){

    var jdata = JSON.parse(json_data); 

    modules.require(['BEMHTML', 'i-bem-dom'], (BEMHTML, bemDom) => {
        bemDom.append(bemDom.doc.find('#place_modal_form'), BEMHTML.apply({
            tag: 'div',
            cls: 'modal-dialog l-new-process',
            content: [
                {
                    tag: 'div',
                    cls: 'modal-content',
                    attrs: { 'data-form-name': 'new' },
                    content: [
                        {
                            tag: 'div',
                            cls: 'modal-body',
                            content: [
                                {
                                    tag: 'div',
                                    cls: 'panel panel-primary',
                                    content: [
                                        {
                                            tag: 'div',
                                            cls: 'panel-heading',
                                            content: [
                                                {
                                                    tag: 'button',
                                                    cls: 'close',
                                                    attrs: { type: 'button', 'data-dismiss': 'modal', 'aria-hidden': 'true' },
                                                    content: 'x'
                                                },
                                                {
                                                    tag: 'h3',
                                                    cls: 'panel-title modal-title',
                                                    content: 'Новая задача'
                                                }
                                            ]
                                        },
                                        {
                                            tag: 'div',
                                            cls: 'panel-body',
                                            content: []
                                        },
                                        {
                                            tag: 'div',
                                            cls: 'panel-footer',
                                            content: [
                                                {
                                                    block: 'c-button-submit',
                                                    js: true,
                                                    tag: 'button',
                                                    cls: 'btn btn-primary',
                                                    attrs: { type: 'button' },
                                                    content: [
                                                        {
                                                            elem: 'glyphicon',
                                                            tag: 'span',
                                                            cls: 'glyphicon glyphicon-ok'
                                                        },
                                                        {
                                                            elem: 'text',
                                                            tag: 'span',
                                                            content: 'Создать'
                                                        }
                                                    ] 
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }));
    });
}

8 years ago

tadatuta

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

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

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

8 years ago

mamatkazin

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

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

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

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

8 years ago

tadatuta

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

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

8 years ago

mamatkazin

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

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

Смотрите, как в такой конструкции обойтись без внешнего контента. То есть мне нужно сразу же в 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;

8 years ago

mamatkazin

Как можно избежать дублирования кода. У меня в контенте подряд идут несколько одинаковых по структуре блока 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: [
                    Тут идет такая же структура, как в блоке выше.
                ]
            },
                        Тут идут такие же блоки
        ]
    }));

});

8 years ago

tadatuta

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

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

8 years ago

tadatuta

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

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

8 years ago

mamatkazin

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

8 years ago

mamatkazin

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

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).

8 years ago

Realetive

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

8 years ago

mamatkazin

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

8 years ago

mamatkazin

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

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

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

8 years ago

tadatuta

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

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

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

8 years ago

mamatkazin

Я правильно понимаю, что в самом начале у меня нет ни какого 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 строка.

7 years ago

mamatkazin

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

7 years ago

tadatuta

@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/

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

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