Передача данных в коллбэки

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

Основные коллбэки

Featherlight поддерживает несколько встроенных коллбэков:

  • beforeOpen — выполняется перед открытием окна.
  • afterOpen — выполняется сразу после открытия.
  • beforeClose — вызывается перед закрытием окна.
  • afterClose — выполняется после закрытия окна.

Каждый из этих коллбэков получает в качестве контекста объект this, который является экземпляром текущего модального окна.

Передача данных через опции

Передача данных в коллбэки осуществляется через объект options при инициализации Featherlight. Любые произвольные свойства, добавленные в options, становятся доступными внутри коллбэков через this.options.

Пример:

$.featherlight('<p>Привет!</p>', {
    customMessage: 'Данные для коллбэка',
    afterOpen: function() {
        console.log(this.options.customMessage);
    }
});

В этом примере при открытии модального окна в консоль будет выведено значение customMessage.

Использование атрибутов HTML

Featherlight позволяет привязывать данные к элементам, которые инициируют открытие модального окна. Атрибуты data- элемента автоматически передаются в коллбэк через объект event.currentTarget и могут быть считаны внутри функций.

Пример:

<a href="#" data-fl-message="Привет из HTML" id="openModal">Открыть окно</a>
$('#openModal').featherlight(function(event){
    alert(event.currentTarget.dataset.flMessage);
});

Здесь значение data-fl-message доступно через event.currentTarget.dataset.flMessage внутри коллбэка.

Передача данных через функцию контента

Featherlight поддерживает функцию, возвращающую содержимое окна. Внутри этой функции можно передавать данные в коллбэки через контекст:

$.featherlight(function(event){
    return '<p>Привет, ' + this.options.username + '</p>';
}, {
    username: 'Алексей',
    afterOpen: function() {
        console.log('Открылось окно для пользователя:', this.options.username);
    }
});

Функция, создающая содержимое, может получать event и использовать this.options для передачи любых динамических данных.

Контекст и сохранение состояния

Контекст коллбэков позволяет хранить состояния между вызовами. Если необходимо, чтобы данные оставались доступны при закрытии и повторном открытии окна, их можно сохранять в this.options:

$.featherlight('<p>Контекст</p>', {
    counter: 0,
    afterOpen: function() {
        this.options.counter++;
        console.log('Открытий окна:', this.options.counter);
    },
    afterClose: function() {
        console.log('Окно закрыто, текущее значение счетчика:', this.options.counter);
    }
});

В этом примере значение counter увеличивается при каждом открытии и сохраняется после закрытия.

Динамическая модификация данных

Перед открытием окна можно изменять данные динамически:

$('#openModal').click(function(){
    $.featherlight('<p>Динамическое окно</p>', {
        username: $(this).data('username'),
        afterOpen: function() {
            console.log('Привет,', this.options.username);
        }
    });
});

Использование data-атрибутов позволяет легко передавать индивидуальные данные для каждого инициатора модального окна.

Коллбэки и асинхронные операции

В коллбэках можно запускать асинхронные операции, например, запросы к серверу. Результат можно сохранять в this.options и использовать в последующих коллбэках:

$.featherlight('<p>Загрузка данных...</p>', {
    afterOpen: function() {
        fetch('/api/data')
            .then(response => response.json())
            .then(data => {
                this.options.fetchedData = data;
                console.log('Данные загружены:', this.options.fetchedData);
            });
    }
});

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

Резюме ключевых методов передачи данных

  • this.options — основной механизм передачи данных в коллбэки.
  • data-атрибуты HTML — позволяют привязывать уникальные значения к конкретным элементам.
  • Функции контента — дают возможность формировать содержимое окна на основе переданных данных.
  • Асинхронные операции — обеспечивают динамическое обновление состояния модального окна.

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

Оглавление