Возврат HTML из шаблона

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

Настройка шаблона

В Noty шаблон задаётся через опцию template. По умолчанию используется стандартный HTML-шаблон уведомления:

<div class="noty_bar noty_type__type noty_theme__theme">
    <span class="noty_text"></span>
</div>

Для возврата кастомного HTML можно передать в template строку с HTML-разметкой или функцию, которая возвращает строку HTML.

Пример с функцией:

new Noty({
    text: function() {
        return `<div class="custom-noty">
                    <strong>Важное уведомление:</strong>
                    <p>Произошло обновление данных</p>
                </div>`;
    },
    type: 'info',
    theme: 'mint',
    timeout: 5000
}).show();

В этом примере используется функция, возвращающая HTML-разметку, где <strong> и <p> создают структурированное содержимое.

Динамическое формирование HTML

Функция-шаблон может принимать параметры, позволяющие формировать уведомление на основе данных:

function createNotificationHTML(title, message, level) {
    return `
        <div class="noty-content noty-${level}">
            <h4>${title}</h4>
            <p>${message}</p>
        </div>
    `;
}

new Noty({
    text: createNotificationHTML('Ошибка', 'Невозможно загрузить файл', 'error'),
    type: 'error',
    theme: 'sunset',
    timeout: 7000
}).show();

Здесь title, message и level позволяют адаптировать уведомление под разные сценарии без дублирования кода.

Использование шаблонов с данными из объекта

Для удобства часто используют объекты данных:

const notificationData = {
    title: 'Успешно',
    message: 'Данные сохранены',
    level: 'success'
};

new Noty({
    text: function() {
        return `
            <div class="noty-custom ${notificationData.level}">
                <h4>${notificationData.title}</h4>
                <span>${notificationData.message}</span>
            </div>
        `;
    },
    type: notificationData.level,
    theme: 'relax',
    timeout: 4000
}).show();

Это упрощает масштабирование системы уведомлений, позволяя хранить шаблоны и данные отдельно.

Интерактивные элементы в шаблоне

Noty позволяет включать в HTML интерактивные элементы — кнопки, ссылки и даже формы:

new Noty({
    text: `
        <div>
            <p>Вы хотите удалить этот элемент?</p>
            <button id="confirmBtn">Да</button>
            <button id="cancelBtn">Нет</button>
        </div>
    `,
    type: 'warning',
    theme: 'mint',
    timeout: false, // не закрывать автоматически
    callbacks: {
        onShow: function() {
            document.getElementById('confirmBtn').addEventListener('click', () => {
                console.log('Подтверждено');
                this.close();
            });
            document.getElementById('cancelBtn').addEventListener('click', () => {
                console.log('Отменено');
                this.close();
            });
        }
    }
}).show();

Такой подход позволяет создавать полноценные диалоговые уведомления без использования внешних библиотек.

Безопасность при генерации HTML

При формировании HTML через шаблон важно избегать вставки данных напрямую из ненадёжных источников, чтобы не допустить XSS-уязвимости. Рекомендуется использовать функции экранирования или библиотеки для безопасной вставки текста:

function escapeHTML(str) {
    return str.replace(/[&<>"']/g, function(match) {
        return ({
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
        })[match];
    });
}

const userMessage = '<script>alert("hack")</script>';

new Noty({
    text: `<p>${escapeHTML(userMessage)}</p>`,
    type: 'alert',
    theme: 'mint'
}).show();

Итоговые рекомендации

  • Использовать функции в template для динамических уведомлений.
  • Разделять данные и разметку для лёгкой поддержки и масштабирования.
  • Добавлять интерактивные элементы через стандартный HTML и события в callbacks.
  • Всегда экранировать пользовательский ввод для безопасности.

Гибкость возвращаемого HTML делает Noty мощным инструментом для сложных интерфейсов, позволяя создавать уведомления любой структуры и поведения.

Оглавление