Интеграция с template-движками

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

Использование шаблонов с Mustache

Mustache — один из самых популярных шаблонизаторов. Он позволяет создавать уведомления с динамическим содержимым, отделяя логику от представления.

Пример интеграции:

import Noty from 'noty';
import Mustache from 'mustache';

const template = "{{title}}: {{message}}";

const data = {
    title: "Ошибка",
    message: "Не удалось загрузить данные"
};

new Noty({
    text: Mustache.render(template, data),
    type: 'error',
    timeout: 5000,
    layout: 'topRight',
    theme: 'metroui'
}).show();

Ключевые моменты:

  • Mustache.render(template, data) генерирует строку с заменёнными переменными.
  • Передача сгенерированного текста в text Noty позволяет создавать уведомления с произвольной структурой.
  • Можно использовать любые HTML-теги в шаблоне, Noty корректно их отобразит.

Интеграция с Handlebars

Handlebars предоставляет расширенные возможности: условные блоки, циклы, встроенные помощники.

Пример с условными блоками:

import Handlebars from 'handlebars';
import Noty from 'noty';

const template = `
{{#if success}}

{{message}}

{{else}}

{{message}}

{{/if}}
`;

const data = { success: false, message: "Ошибка при отправке формы" };

const compiled = Handlebars.compile(template);
new Noty({
    text: compiled(data),
    timeout: 4000,
    type: data.success ? 'success' : 'error',
    layout: 'topRight',
    theme: 'mint'
}).show();

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

  • Поддержка условных конструкций позволяет управлять отображением различных блоков уведомления.
  • Циклы {{#each items}} полезны для динамических списков внутри уведомлений.
  • Удобно комбинировать с CSS-классами, передаваемыми через данные шаблона.

Использование EJS для динамических уведомлений

EJS (Embedded JavaScript) позволяет вставлять JS-код прямо в шаблон.

Пример:

import Noty from 'noty';
import ejs from 'ejs';

const template = `

    
  <% messages.forEach(function(msg){ %>
    
  • <%= msg %>
    • 
  <% }); %>


`;

const data = { messages: ["Событие 1", "Событие 2", "Событие 3"] };

new Noty({
    text: ejs.render(template, data),
    type: 'info',
    timeout: 6000,
    layout: 'bottomLeft',
    theme: 'sunset'
}).show();

Примечания по EJS:

  • Позволяет выполнять любые JS-выражения внутри шаблона.
  • Удобен для отображения массивов и сложных структур данных.
  • Следует быть осторожным с HTML-инъекциями, так как <%= %> экранирует вывод, а <%- %> — нет.

Динамическая генерация уведомлений через шаблоны

Для более сложных интерфейсов часто создаются функции-генераторы уведомлений, которые принимают данные и автоматически формируют уведомление:

function showNotification(type, title, message) {
    const template = `${title}: ${message}`;
    new Noty({
        text: template,
        type: type,
        layout: 'topRight',
        timeout: 4000,
        theme: 'metroui'
    }).show();
}

showNotification('success', 'Успех', 'Данные сохранены');
showNotification('error', 'Ошибка', 'Не удалось сохранить данные');

Рекомендации:

  • Для повторяющихся уведомлений полезно создавать отдельный модуль с функцией генерации.
  • Можно интегрировать шаблонизатор напрямую в генератор для унификации формата уведомлений.
  • Использование шаблонов облегчает поддержку многоязычности и кастомизации внешнего вида уведомлений.

Работа с HTML-шаблонами в Noty

Noty позволяет использовать HTML-теги и классы, что даёт возможность легко подключать стилизованные шаблоны:

const htmlTemplate = `


  
{{title}}

  
{{message}}

  {{time}}


`;

const data = {
    title: "Информация",
    message: "Процесс завершен успешно",
    time: new Date().toLocaleTimeString()
};

new Noty({
    text: Mustache.render(htmlTemplate, data),
    type: 'info',
    timeout: 5000,
    layout: 'topCenter',
    theme: 'relax'
}).show();

Выводы по использованию HTML-шаблонов:

  • Позволяет вставлять иконки, кнопки и сложную разметку.
  • Поддержка CSS-классов и анимаций позволяет создавать визуально богатые уведомления.
  • Использование шаблонизаторов гарантирует, что контент уведомления всегда синхронизирован с данными приложения.
Оглавление