Где и как лучше хранить html блоки для выгрузки их через AJAX?

Question

[Алекс Франц]

Добрый день!

Обдумываю детали страницы отправки команд на сервер, которая будет состоять из нескольких сценариев:
1) Первая форма для ввода данных
2) Вторая форма для ввода данных
3) Блок спинера (на время обработки)
4) Блок с результатом ответа от сервера

По ходу обработки вводимых данных, их отправки и ожидания ответа, блоки должны переключаться между собой (после отправки формы мы заменим содержимое на спинер, а после выведем ответ с сервера).

Делаю это в первый раз, начальный способ смены контента - скрывать/показывать блоки через их css свойства (hidden).
Конечно, это сработает, но явно это не верный путь.
Каждый блок (30-40 строк html кода) помещать в отдельные html файлы, а после выгружать с них данные, думаю, что не ахти.

Вопрос: как грамотно можно реализовать хранение множества блоков с контентом и последующий их вызов?
Возможно ли их разместить в одном файле и вызывать по определенному тегу?

Answer 1

[Roman]

Храните шаблоны в теге script, с типом "text/html" или "text/template":

<script type="text/html" id="foobar-tpl">
<div>some content</div>
</script>
<script>
var tpl = document.getElementById('foobar-tpl').innerHTML;
console.log(tpl); // <div>some content</div>
</script>

Сверху на это можно прикрутить JS-шаблонизатор, типа EJS или mustache.js и получить настоящий шаблон, с динамическим содержимым. Вот простейший пример такого шаблона с динамикой (без библиотек): https://repl.it/repls/NuttyMindlessDivisor

А вообще, в современных реалиях для подобной динамики используются библиотеки React, Vue и прочие.

Comments

[Алекс Франц]

Спасибо!