У меня есть такая проблемка: получаю данные с сервера при помощи Http-запроса. Оттуда данные нужно вставлять в шаблон, делаю это в js'е, но получается что-то вроде этого:
const questionWrapper = document.createElement('div');
questionWrapper.innerHTML = `<div class="single-question">
<div class="single-question__action-info">
<span class="single-question__action-id">
Акция №${el.event_id}
</span>
</div>
<div class="single-question__content">
<div class="single-question__question">
<h5 class="single-question__question-title">Вопрос <span class="open-input open-input_question"><img src="img/question-icon.svg" alt=""></span></h5>
<div class="single-question__question-text">
${el.question}
</div>
<div class="input-wrapper">
<textarea class="question-textarea" name="" id=""></textarea>
<button class="submit-textarea submit-textarea_question">Ответить</button>
</div>
<div class="single-question__answer">
<h5 class="single-question__answer-title">Ответ <span class="open-input open-input_answer open-input_grey"><img src="img/question-icon.svg" alt=""></span></h5>
<div class="single-question__answer-text">
${el.answer}
</div>
<div class="input-wrapper">
<textarea class="answer-textarea" name="" id=""></textarea>
<button class="submit-textarea submit-textarea_answer">Ответить</button>
</div>
</div>`;
$('.answers__list').insertBefore(questionWrapper, $('.single-question_wrapper'));
HTML-Разметки очень много и вставлять нужно около 10-15 переменных с сервера
Это все корректно работает но выглядит немного несуразно и некрасиво. Можно поступить лучше, оставив шаблон и использовать querySelector'ы и вставлять таким образом, но 10-15 селекторов и потом еще и 10-15 textContent'ов это не есть хорошо для производительности.
Все бы ничего, я бы оставил так, но есть еще одна загвоздка:
-Это тело вопроса, которое рендерится несколько раз, в зависимости от кол-ва, приходящего с сервера
-Помимо этого есть подключение по сокету и, если добавляется новый вопрос, то сокеты его присылают и нужно снова дублировать эту разметку.
Может быть есть какие нибудь шаблонизаторы, чтобы спрятать этот HTML хотя бы в 1 переменную. Если это сделать сейчас, то он не найдет элементы, вставляемые при помощи `${}`
Как можно сделать код более чистым и валидным?
