Здравствуйте, подскажите пожалуйста на счёт такого момента.
После нажатия на некоторую кнопку, с сервера прилетает запись из БД, в ней множество (около 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);
};
