Переменные в шаблонах

Noty — это гибкая библиотека для уведомлений в JavaScript, позволяющая создавать интерактивные и визуально привлекательные сообщения на веб-странице. Одной из ключевых возможностей является использование шаблонов с переменными, что обеспечивает динамическое формирование контента уведомлений.

Использование переменных в text

Поле text в конфигурации Noty может принимать строку или функцию, которая возвращает строку. Для динамического контента чаще всего применяются шаблонные литералы ES6:

let userName = "Иван";
let notificationsCount = 5;

new Noty({
    type: 'alert',
    text: `Привет, ${userName}! У вас ${notificationsCount} новых уведомлений.`,
    timeout: 3000
}).show();

Особенности:

  • Используются ${переменная} внутри обратных кавычек `.
  • Переменные могут быть любыми: строки, числа, объекты, массивы.
  • Поддерживаются выражения: ${notificationsCount > 0 ? 'Есть новые уведомления' : 'Нет новых уведомлений'}.

Шаблоны через функции

Noty позволяет передавать функцию в text, что полезно для отложенной генерации текста:

let messages = ["Сообщение 1", "Сообщение 2", "Сообщение 3"];

new Noty({
    type: 'info',
    text: function() {
        return `Последнее сообщение: ${messages[messages.length - 1]}`;
    },
    timeout: 4000
}).show();

Преимущества использования функции:

  • Значение вычисляется в момент отображения уведомления.
  • Можно получать актуальные данные из состояния приложения.
  • Позволяет добавлять логику формирования текста без внешних промежуточных переменных.

Переменные в кастомных шаблонах (template)

Для сложного оформления Noty предоставляет возможность задавать собственный HTML-шаблон через свойство template. В этом случае переменные можно вставлять с помощью Jav * aScript:

let user = { name: "Мария", role: "админ" };

new Noty({
    type: 'success',
    layout: 'topRight',
    template: `
        <div class="noty_body">
            Пользователь <strong>${user.name}</strong> с ролью <em>${user.role}</em> вошёл в систему.
        </div>
    `,
    timeout: 5000
}).show();

Рекомендации при работе с кастомными шаблонами:

  • Использовать ES6-шаблонные литералы для удобной подстановки переменных.
  • Не вставлять необработанные данные от пользователей без экранирования, чтобы избежать XSS.
  • Можно комбинировать переменные с HTML-классами и атрибутами для динамического оформления.

Встроенные переменные Noty

Noty имеет встроенные свойства объекта уведомления, которые можно использовать в шаблоне:

  • this.options.text — текст уведомления.
  • this.options.type — тип уведомления (alert, success, error, info, warning).
  • this.options.timeout — время показа уведомления.
  • this.id — уникальный идентификатор экземпляра.

Пример:

new Noty({
    type: 'warning',
    text: function() {
        return `Уведомление #${this.id}: тип - ${this.options.type}`;
    },
    timeout: 4000
}).show();

Преимущества:

  • Позволяет создавать универсальные шаблоны, зависящие от текущей конфигурации уведомления.
  • Удобно для логирования и отладки динамических уведомлений.

Динамическая вставка данных из внешних источников

Переменные в шаблонах Noty могут быть объектами или массивами, что упрощает создание динамического списка уведомлений:

let tasks = [
    { title: "Задача 1", deadline: "2026-04-10" },
    { title: "Задача 2", deadline: "2026-04-12" }
];

tasks.forEach(task => {
    new Noty({
        type: 'info',
        text: `Срок выполнения: ${task.title} — ${task.deadline}`,
        timeout: 3000
    }).show();
});

Преимущества подхода:

  • Поддержка циклов для массовой генерации уведомлений.
  • Удобно для работы с API и динамическими данными.
  • Шаблоны остаются компактными и читаемыми.

Итоговая структура шаблонов с переменными

Основные правила работы с переменными в Noty:

  1. Для простых случаев использовать строковые шаблоны с ${}.
  2. Для динамических данных — функции в text.
  3. Для сложного оформления — кастомные template с подстановкой переменных.
  4. Встроенные свойства (this.options, this.id) позволяют создавать универсальные шаблоны.
  5. При использовании данных из внешних источников всегда контролировать безопасность и форматирование.

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

Оглавление