Etape 8 : exécution des actions

A la fin de cette rubrique, vous pourrez déplacer des composants vers la page qui exécute les actions dans le composant. Cette opération exploite l'inscription d'actions que vous avez créée à l'étape précédente.

Pour qu'un composant exécute une action, il doit écouter le message EXECUTE_ACTION. Ce message comprend également les données traitées transmises à l'action à partir desquelles vous extrairez les valeurs attendues.

Pour écouter le message EXECUTE_ACTION, modifiez le fichier render.js et mettez à jour l'objet SampleComponentViewModel avec l'entrée suivante :

SitesSDK.subscribe('EXECUTE_ACTION', $.proxy(self.executeActionsListener, self));

Lorsque le message EXECUTE_ACTION est reçu, la fonction callback associée est exécutée :

    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);
          }
        });
      }
    }

Cette opération crée une fonction JavaScript pour exécuter l'action et utilise le kit SDK Sites pour appeler la fonction dès que le message EXECUTE_ACTION est déclenché.

Le composant sera appelé dès qu'un message EXECUTE_ACTION est déclenché, et c'est à lui de gérer uniquement les actions pour lesquelles il est conçu. A cet effet, vous devez vérifier le nom de l'action pour vous assurer qu'elle fait partie de celles gérées par le composant.

Les données traitées de l'action sont un tableau de valeurs. En règle générale, vous devez chercher les valeurs de données traitées qui vous intéressent dans le tableau.