Колбэки (параметры-действия)
Колбэк — это способ передать действие сверху вниз: со страницы или родительского компонента внутрь дочернего. Родитель говорит, что должно произойти при событии, а компонент просто вызывает переданное действие в нужный момент.
Так дочерний компонент получает поведение, которого сам не знает: переход, обновление данных, показ диалога.
Возьмём компонент загрузки изображения. Что делать после успешной загрузки, решает родитель — через колбэк компонент выполнит его действия:
- сжать изображение, чтобы оно меньше весило;
- записать ссылку на файл в профиль пользователя;
- обновить интерфейс, показав новую аватарку.
Сам компонент про всё это не знает — и потому переиспользуется где угодно.
- Разделение обязанностей. Компонент отвечает за свою работу, а не за последствия — логику держит родитель.
- Переиспользование. Один и тот же компонент в разных местах ведёт себя по-разному: меняется только переданный колбэк.
Как добавить колбэк
Продолжим на примере компонента загрузки изображения.
Создание параметра
Чтобы компонент мог выполнить колбэк, у него должен быть параметр типа Action. Назовём его uploadAction — это и есть действие, которое выполнится после загрузки.
У параметра-действия бывают свои параметры: родителю понадобится ссылка на загруженный файл, поэтому добавим uploadedURL.
Дальше страница или компонент, который использует эту кнопку, применит параметр в своём потоке действий — как в примере ниже.
Вызов колбэка
Переданное действие вызывается через Execute Callback в потоке действий компонента.
Например, так колбэк вызывается после успешной загрузки, а вместе с ним передаётся ссылка на файл.
Передача действия компоненту
Добавляя компонент в дерево виджетов, вы задаёте значения его параметров — в том числе параметров-действий.
Для компонента загрузки изображения это будут действия, которые выполнятся при срабатывании колбэка. В примере — обновление фотографии профиля.
Значение, переданное в колбэк, доступно в меню Set Variable > Callback Parameters.
Такой компонент переносится куда угодно: логику после загрузки задаёт тот, кто его использует. Тот же компонент подойдёт и для фотографий в отзывах о товаре — отдельный делать не придётся.
Ещё примеры
Диалог с переменным поведением
Универсальный диалог подтверждения: в одном месте «Да» удаляет запись, в другом — выходит из аккаунта, в третьем — сохраняет данные.
Что именно произойдёт, решает страница или компонент, который открыл диалог. Сам диалог только вызывает переданный колбэк по нажатию «Да».
Панель навигации в супераппе
Суперапп объединяет несколько мини-приложений, и у каждого своя навигация. Колбэки позволяют не зашивать маршруты в саму панель: она отвечает только за внешний вид, а поведение задаёт активное мини-приложение.
В магазине кнопка «домой» ведёт на список товаров, а центральная открывает корзину. В сервисе такси та же кнопка «домой» открывает главный экран, а центральная — быстрый заказ.
