b2bon.ru

Шаблоны (cybervela.templates.js)

Система шаблонизации позволяет динамически вставлять данные в HTML-шаблоны с поддержкой условий, циклов и вложенных шаблонов.

Пример использования

// HTML шаблон
<template id="user-card">
  {#if user.isAdmin}
    <div class="admin-tag">Админ</div>
  {/if}

  <h3>{user.name}</h3>
  <p>Email: {user.email}</p>

  {#each user.roles}
    <span class="role">{item}</span>
  {/each}
</template>

// Инициализация
const templateEngine = new TemplateEngine();
const html = templateEngine.render('#user-card', {
  user: {
    name: 'Иван Иванов',
    email: 'ivan@example.com',
    isAdmin: true,
    roles: ['Пользователь', 'Модератор']
  }
});

Основные возможности

  • • Условия: {#if condition}...{/if}
  • • Циклы: {#each array}...{/each}
  • • Включения: {#include templateName}
  • • Выражения: {expression}

Условные блоки

Пример:

{#if user.status === 'active'}
  <span>Активный пользователь</span>
{/if}

Циклы

Пример:

{#each products}
  <div class="product">
    <h4>{item.name}</h4>
    <p>{item.price} руб.</p>
  </div>
{/each}

Включения шаблонов

Пример:

// Основной шаблон
<template id="main">
  <header>{#include header}</header>
  <main>{content}</main>
</template>

// Вложенный шаблон
<template id="header">
  <nav>Меню</nav>
</template>

Выражения

Поддерживаются:

  • • Переменные: {user.name}
  • • Методы: {formatDate(user.birthdate)}
  • • Операции: {price * 0.9}
  • • Условия: {stock > 0 ? 'В наличии' : 'Нет'}

Безопасный контекст

Доступны встроенные функции:

Работа с массивами

{join(roles, ', ')} // Объединяет элементы массива
{slice(products, 0, 3)} // Возвращает подмассив
{filter(users, u => u.active)} // Фильтрация
{map(items, i => i.toUpperCase())} // Преобразование
{sort(names, (a,b) => a.localeCompare(b))} // Сортировка
{reverse(list)} // Инвертирует порядок
{length(arr)} // Получает длину массива

Работа со строками

{toUpperCase(name)} // Заглавные буквы
{toLowerCase(email)} // Строчные буквы
{trim(description)} // Убирает пробелы
{replace(text, /old/g, 'new')} // Замена текста
{split(tags, ', ')} // Разбивает строку
{substring(text, 0, 100)} // Обрезает строку
{trimEnd(address)} // Убирает пробелы справа

Работа с числами

{parseInt('123')} // Преобразует в число
{parseFloat('3.14')} // Число с плавающей точкой
{isNaN(value)} // Проверка на NaN
{isFinite(num)} // Проверка на конечность
{Math.round(price)} // Округление
{Math.max(...numbers)} // Максимальное значение

Работа с датами

{now()} // Текущее время в миллисекундах
{formatDate(order.date, 'DD.MM.YYYY')} // Форматирование
{new Date(timestamp)} // Создание объекта Date

Работа с объектами

{keys(user)} // Получает ключи
{values(profile)} // Получает значения
{entries(settings)} // Ключ-значение
{hasOwn(user, 'id')} // Проверка наличия свойства

Реализация через класс templates

Для работы с шаблонами из DOM:

// HTML
  <template class="user-card">
    <div class="card">
      <h3>{name}</h3>
      <p>{bio}</p>
    </div>
</template>

// JS
const templates = new templates(core);
templates.set('.user-card');
const userCard = templates.get('user-card')[0];
const html = templateEngine.render(userCard.templateHTML, userData);

Обработка ошибок

Система автоматически логирует ошибки:

// При неправильном выражении:
{undefinedVariable + 5} // Будет выведено как есть
console.warn: Error evaluating expression...
Назад
Вперед