Trinn 8: Utføre handlinger

Når du har gjennomgått dette emnet, er du i stand til å slippe komponenter på siden som utfører handlinger i komponenten din. Handlingsregistreringen du opprettet i forrige trinn, benyttes her.

Når en komponent skal utføre en handling, må den lytte etter meldingen EXECUTE_ACTION. Denne meldingen inneholder også nyttelasten som er sendt til handlingen, som du skal trekke ut de forventede verdiene fra.

Når du skal lytte etter meldingen EXECUTE_ACTION, redigerer du filen render.js og oppdaterer objektet SampleComponentViewModel med følgende oppføring:

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

Når meldingen EXECUTE_ACTION mottas, utføres den tilknyttede tilbakekallfunksjonen:

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

Det opprettes en JavaScript-funksjon for å utføre handlingen. Deretter brukes SDK-et for områder til å kalle opp funksjonen når meldingen EXECUTE_ACTION initieres.

Komponenten kalles hver gang meldingen EXECUTE_ACTION initieres, og det er opp til komponenten om den bare behandler handlingene den er utformet for å behandle. Derfor må du kontrollere navnet på handlingen, slik at du er sikker på at komponenten kan behandle den.

Nyttelasten for handlingen er en matrise med verdier. Du må vanligvis hente de ønskede nyttelastverdiene fra matrisen.

Merknad:

Siden handlingslytteren er en tilbakekalling, bør du bruke JavaScript-avslutning eller binde funksjonen tilstrekkelig slik at du er sikker på at du har tilgang til viewModel når funksjonen utføres.

Kontrollere resultatene for trinn 8

  1. Oppfrisk siden på området ditt slik at områdebyggeren kan plukke opp endringer av komponenten.

  2. Sett siden i redigeringsmodus.

  3. Dra og slipp komponenten din på siden.

  4. Dra og slipp en knappkomponent på siden.

  5. Åpne ruten Innstillinger for knappkomponenten.

  6. I fanen Generelt endrer du etiketten for knappen til Klikk på meg.

  7. Velg fanen Kobling øverst i ruten Innstillinger.

  8. Velg Triggerhandlinger som koblingstype.

  9. Klikk på triggeren Klikk på knapp for knappkomponenten.

  10. I dialogboksen utvider du komponenten A_Local_Component på venstre side.

  11. Dra og slipp handlingen Oppdater bildebredde fra komponenten A_Local_Component på høyre side.

  12. Angi 300 px i feltet Bildebredde i piksler.

  13. Bytt til forhåndsvisningsmodus for siden.

  14. Klikk på knappen Klikk på meg.

På dette tidspunktet øker størrelsen på bildet ditt til 300 px.

Merknad:

Triggere og handlinger et utformet slik at de støtter kommunikasjon mellom komponenter. De er ikke utformet for å opprette eller administrere tilstander. Hvis du oppfrisker siden, går den tilbake til den opprinnelige tilstanden som om ingen triggere er initiert eller handlinger er utført.

Gå videre til Trinn 9: Opprette en distinkt tittel for hver forekomst av komponenten.