Функции рендера шаблонов
Полные файлы смотри тут
src/includes/repeatModules.html
О структуре
Так как весь код на Т статический и рендер происходит на клиенте, для упрощений работы с повторяющимися блоками, подготовлен шаблон рендеринга таких блоков.
Как добавить на страницу
- В редакторе Т на нужной странице добавляем блок T123 HTML-код. В нем в стандартную разметку нужно добавить блок - родитель для итерируемых элементов
<div class="module-items-js">
<h2>Ваш браузер не поддерживает показ этого экрана. Обновите версию браузера.</h2>
</div>
- Ниже в этом блоке пишем JS логику данных
// В moduleItems можно хранить коллекцию данных любого формата
const moduleItems = [
// items
// {}, [], '',
];
// Функция рендера проходит итерацией по массиву и через метод map возвращает новый массив
// элементов с добавлением разметки
function generateSection() {
$('.module-items-js').empty();
const mapItem = moduleItems.map(function (item, index) {
// write your html
return `Hello ${item} with ${index}`;
});
// Добавляем элементы в блок - родитель
const parent = document.querySelector('.module-items-js');
parent.insertAdjacentHTML('afterbegin', mapItem.join(' '));
};
generateSection();
Пример
<div class="cards pd-main">
<div class="container">
<div class="cards_items cards_items-js grid-d">
<h2>Ваш браузер не поддерживает показ этого экрана. Обновите версию браузера.</h2>
</div>
</div>
<script>
const cardsItems = [
'Изучите логику работы системной компании',
'Сформируете картину своего идеального бизнеса',
'Проведете комплексный управленческий аудит своей компании',
'Найдете рычаги роста бизнеса',
'Разработаете пошаговый план перехода к системному управлению',
];
function generateCards() {
$('.cards_items-js').empty();
const cardsItem = cardsItems.map(function (card) {
return `<div class="card_item card text-center">
<img loading="lazy" width="36" height="36" class="card_item-img pointer-events" src="https://forstas.bizconstructor.com/cdn/owner/npr/check-card.svg">
<p class="text-sm-ex fw400">${card}</p>
</div>`;
});
const parent = document.querySelector('.cards_items-js');
parent.insertAdjacentHTML('afterbegin', cardsItem.join(' '));
};
generateCards();
</script>
</div>