Передача параметров в callback

В библиотеке iziToast все уведомления создаются с помощью функции iziToast.show() или специализированных методов, таких как iziToast.success(), iziToast.error(), iziToast.info() и iziToast.warning(). Одной из ключевых особенностей является возможность использовать callback-функции, которые вызываются при определённых событиях уведомления: onOpening, onOpened, onClosing, onClosed, а также для кнопок уведомлений через buttons. Передача параметров в эти callback требует внимательного подхода, чтобы сохранить правильный контекст и передать данные в момент вызова.

Основные события и callback

iziToast поддерживает следующие события с callback:

  • onOpening(instance, toast) – вызывается до отображения уведомления.
  • onOpened(instance, toast) – вызывается сразу после того, как уведомление стало видимым.
  • onClosing(instance, toast, closedBy) – вызывается до закрытия уведомления.
  • onClosed(instance, toast, closedBy) – вызывается после закрытия уведомления.

Каждый callback получает следующие параметры:

  • instance – объект iziToast с методами управления уведомлениями (destroy, hide, show и др.).
  • toast – DOM-элемент уведомления, что позволяет манипулировать его содержимым.
  • closedBy – строка, описывающая, каким образом уведомление было закрыто ("timeout", "button", "overlay", "manual").

Передача дополнительных параметров

Прямого способа добавить параметры в стандартные события нет, поэтому используют замыкания или анонимные функции для сохранения контекста.

Пример с замыканием:

function showNotification(userId) {
    iziToast.success({
        title: 'Успешно',
        message: 'Данные пользователя загружены',
        onClosing: function(instance, toast, closedBy) {
            handleClose(userId, closedBy);
        }
    });
}

function handleClose(userId, reason) {
    console.log(`Уведомление для пользователя ${userId} закрыто по причине: ${reason}`);
}

showNotification(42);

В этом примере параметр userId передаётся в callback через область видимости функции. Такой способ позволяет динамически передавать любые данные в момент вызова события.

Передача параметров через кнопки уведомлений

iziToast поддерживает кнопки внутри уведомлений с помощью опции buttons. Каждая кнопка имеет callback-функцию, где также можно использовать замыкания:

iziToast.show({
    title: 'Подтверждение',
    message: 'Вы хотите удалить элемент?',
    buttons: [
        ['<button>Да</button>', function (instance, toast) {
            deleteItem(101);
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }],
        ['<button>Нет</button>', function (instance, toast) {
            console.log('Удаление отменено');
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

function deleteItem(itemId) {
    console.log(`Элемент с ID ${itemId} удалён`);
}

Здесь itemId передается через замыкание в callback кнопки. Внутри кнопки можно также управлять самим уведомлением через метод hide.

Использование стрелочных функций для передачи параметров

Стрелочные функции позволяют сохранять контекст родительской функции и одновременно передавать параметры:

const user = { id: 7, name: 'Иван' };

iziToast.info({
    title: 'Приветствие',
    message: `Добро пожаловать, ${user.name}!`,
    onOpened: (instance, toast) => handleOpen(user.id)
});

function handleOpen(userId) {
    console.log(`Уведомление открыто для пользователя ${userId}`);
}

Стрелочные функции удобны для кратких операций и читаемого синтаксиса, особенно при работе с динамическими данными.

Хранение параметров в DOM уведомления

Если требуется, чтобы callback имел доступ к параметрам вне замыканий, можно сохранять данные прямо в DOM-элементе уведомления через dataset:

iziToast.show({
    title: 'Важное',
    message: 'Событие с ID 555',
    onOpening: function(instance, toast) {
        toast.dataset.eventId = '555';
    },
    onClosed: function(instance, toast) {
        const eventId = toast.dataset.eventId;
        console.log(`Уведомление с событием ${eventId} закрыто`);
    }
});

Такой подход полезен, если уведомление создаётся динамически и callback вызывается после асинхронных операций.

Рекомендации по передаче параметров

  1. Использовать замыкания или стрелочные функции для передачи динамических данных.
  2. Для сложных уведомлений с кнопками параметр лучше передавать через callback кнопки.
  3. При необходимости хранения параметров внутри уведомления использовать dataset DOM-элемента.
  4. Для повторного использования функций callback создавать отдельные именованные функции, чтобы избежать дублирования кода и улучшить читаемость.

Пример комплексного уведомления с параметрами

function notifyUser(user) {
    iziToast.show({
        title: 'Информация',
        message: `Пользователь ${user.name} добавлен`,
        onOpened: (instance, toast) => console.log(`Открыто уведомление для ${user.id}`),
        onClosed: (instance, toast, closedBy) => console.log(`Закрыто уведомление для ${user.id}, причина: ${closedBy}`),
        buttons: [
            ['<button>Подробнее</button>', function (instance, toast) {
                console.log(`Показать детали пользователя ${user.id}`);
                instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
            }]
        ]
    });
}

notifyUser({ id: 3, name: 'Алексей' });

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

Оглавление