После прохождения этой темы вы сможете перетаскивать компоненты на страницу, на которой действия выполняются в пределах компонента. Это позволяет использовать регистрацию действий, созданную в ходе выполнения предыдущего шага.
Чтобы выполнить действие, компонент должен прослушивать сообщение EXECUTE_ACTION
. Это сообщение также включает передаваемые действию полезные данные, из которых необходимо извлечь ожидаемые значения.
Чтобы прослушивать сообщение EXECUTE_ACTION
, измените файл render.js
и обновите объект SampleComponentViewModel
с учетом следующей записи:
SitesSDK.subscribe('EXECUTE_ACTION', $.proxy(self.executeActionsListener, self));
При получении сообщения EXECUTE_ACTION
выполняется соответствующая функция обратного вызова:
self.executeActionsListener = function (args) { // get action and payload var payload = args.payload, action = args.action; // handle 'setImageWidth' actions if (action && action.actionName === 'setImageWidth') { $.each(payload, function(index, data) { if (data.name === 'imageWidth') { self.imageWidth(data.value); } }); } }
В результате создается функция JavaScript для выполнения действия, а затем используется комплект Sites SDK для вызова функции при появлении сообщения EXECUTE_ACTION
.
Данный компонент вызывается при любом появлении сообщения EXECUTE_ACTION
, и компонент обрабатывает только те действия, для обработки которых он предназначен. Для этого необходимо проверить имя действия, чтобы убедиться, что это то действие, которое компонент может обработать.
Полезные данные для действия — это набор значений. Как правило, значения полезных данных должны быть указаны в массиве.
Примечание.:
Поскольку прослушиватель действий представляет собой обратный вызов, необходимо использовать замыкание JavaScript или соответствующим образом привязать данную функцию, чтобы обеспечить доступ к viewModel при выполнении функции.Проверка результатов для шага 8
Обновите страницу на своем сайте, чтобы приложение Site Builder могло отслеживать изменения в компоненте.
Переключите страницу в режим редактирования.
Перетащите свой компонент на страницу.
Перетащите компонент "Кнопка" на страницу.
Откройте панель "Настройки" для компонента "Кнопка".
На вкладке "Общие" измените метку кнопки на Нажми меня!
Выберите вкладку Ссылка в верхней части панели "Настройки".
В списке Действия триггера выберите вариант "Тип ссылки".
Нажмите триггер Нажать кнопку напротив компонента "Кнопка".
В диалоговом окне разверните компонент A_Local_Component
на левой стороне.
Перетащите действие Обновить ширину изображения из компонента A_Local_Component
на правую сторону.
Введите 300px в поле Ширина изображения в пикселах.
Переключите страницу в режим предварительного просмотра.
Нажмите кнопку Нажми меня!.
В этот момент размер изображения увеличивается до 300 пикселей
.
Примечание.:
Триггеры и действия предназначены для поддержки связи между компонентами. Они не предназначены для создания состояния или управления им. При обновлении страница возвращается в исходное состояние, как если бы не срабатывали триггеры и не выполнялись действия.Теперь выполните Шаг 9. Создание отдельного заголовка для каждого экземпляра компонента.