Шаг 8. Выполнение действий

После прохождения этой темы вы сможете перетаскивать компоненты на страницу, на которой действия выполняются в пределах компонента. Это позволяет использовать регистрацию действий, созданную в ходе выполнения предыдущего шага.

Чтобы выполнить действие, компонент должен прослушивать сообщение 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

  1. Обновите страницу на своем сайте, чтобы приложение Site Builder могло отслеживать изменения в компоненте.

  2. Переключите страницу в режим редактирования.

  3. Перетащите свой компонент на страницу.

  4. Перетащите компонент "Кнопка" на страницу.

  5. Откройте панель "Настройки" для компонента "Кнопка".

  6. На вкладке "Общие" измените метку кнопки на Нажми меня!

  7. Выберите вкладку Ссылка в верхней части панели "Настройки".

  8. В списке Действия триггера выберите вариант "Тип ссылки".

  9. Нажмите триггер Нажать кнопку напротив компонента "Кнопка".

  10. В диалоговом окне разверните компонент A_Local_Component на левой стороне.

  11. Перетащите действие Обновить ширину изображения из компонента A_Local_Component на правую сторону.

  12. Введите 300px в поле Ширина изображения в пикселах.

  13. Переключите страницу в режим предварительного просмотра.

  14. Нажмите кнопку Нажми меня!.

В этот момент размер изображения увеличивается до 300 пикселей.

Примечание.:

Триггеры и действия предназначены для поддержки связи между компонентами. Они не предназначены для создания состояния или управления им. При обновлении страница возвращается в исходное состояние, как если бы не срабатывали триггеры и не выполнялись действия.

Теперь выполните Шаг 9. Создание отдельного заголовка для каждого экземпляра компонента.