@TAZAQ

Как правильно формировать динамический контент?

Здравствуйте, подскажите пожалуйста на счёт такого момента.
После нажатия на некоторую кнопку, с сервера прилетает запись из БД, в ней множество (около 10) атрибутов которые затем должны внестись в вёрстку. Сейчас это выполняется кодом ниже, мне не нравится то, что в JS коде присутствует в таком крупном виде html код. Подскажите, пожалуйста, как правильно разделить коды, надо ли разделять вообще или лучше вообще перенести формирование блока на сервер?

Есть ли какая литература/гайды/видео по этому поводу?

function (data) {
        let task = JSON.parse(data.result);

        let date_start = Date.parse(task.task_date_start);
        let date_finish = !task.task_date_finish ? date_start : Date.parse(task.task_date_finish);
        date_start = new Date(date_start).toLocaleDateString();
        date_finish = new Date(date_finish).toLocaleDateString();

        let new_task = `
            <div data-orig-pos="${task.task_key}" 
                 data-score="${task.task_estimate}" 
                 data-priority="${task.priority_id}"
                 data-date="${task.task_date_start}" 
                 id="${task.task_id}"
                 class="task uk-background-secondary uk-card uk-card-default uk-card-body uk-margin-small-bottom ${task.priority_css}">
                <div class="task-title uk-light">
                    <span class="task-title-text">${task.task_name}</span>
                    <span class="task-counter uk-float-right">${task.sub_done}/${task.sub_all}</span>
                    <span class="icon-fix uk-float-right" uk-icon="list"></span>
                </div>
                <div class="task-items uk-text-right non-select">
                    <span class="uk-badge task-dates">${date_start} - ${date_finish}</span>
                    <span class="uk-badge task-scores">${task.task_estimate}</span>
                </div>
            </div>        
        `;

        $('#state_1').prepend(new_task);
    };
  • Вопрос задан
  • 174 просмотра
Решения вопроса 3
firedragon
@firedragon
Не джун-мидл-сеньор, а трус-балбес-бывалый.
Как раз нормально. Сервер отдает данные, а фронт их форматирует.
Ответ написан
Комментировать
@McBernar
Все нормально, только поменяйте jquery на реакт. А то так и будете императивный код всю жизнь писать.
Ответ написан
Комментировать
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Посмотрите на includeHTML.
Это поможет в разы сократить код на фронте и увеличить скорость разработки функционала пользовательских страниц с динамически подгружаемым контентом.
Всего 1 функция!
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Comsequent
Пишу потихоньку.
Как вариант,Вы, можете формировать строку с разметкой и данными на стороне сервера. На клиенте останется сделать
$('#div').html(dataStringFromServer)
Что будет быстрее, в Вашем случае, сказать не могу
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы