Βήμα 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 για την εκτέλεση της ενέργειας και, στη συνέχεια, χρησιμοποιεί το SDK τοποθεσιών για την κλήση της συνάρτησης όποτε εμφανίζεται το μήνυμα EXECUTE_ACTION.

Το συστατικό στοιχείο θα καλείται όποτε εμφανίζεται ένα μήνυμα EXECUTE_ACTION και εξαρτάται από το συστατικό στοιχείο να χειρίζεται μόνο ενέργειες τις οποίες έχει σχεδιαστεί να χειρίζεται. Για να γίνει αυτό, πρέπει να ελέγξετε το όνομα της ενέργειας για να βεβαιωθείτε ότι το συστατικό στοιχείο μπορεί να το χειριστεί.

Το ωφέλιμο φορτίο για την ενέργεια είναι ένας πίνακας τιμών. Συνήθως, πρέπει να βρείτε τις τιμές ωφέλιμου φορτίου που σας ενδιαφέρουν από τον πίνακα.

Σημείωση:

Επειδή η λειτουργία ακρόασης της ενέργειας είναι επανάκληση, πρέπει να χρησιμοποιήσετε το JavaScript Closure ή να δεσμεύσετε κατάλληλα τη συνάρτηση για να βεβαιωθείτε ότι έχετε πρόσβαση στο αντικείμενο viewModel όταν εκτελείται η συνάρτηση.

Έλεγχος αποτελεσμάτων για το βήμα 8

  1. Ανανεώστε τη σελίδα σας στην τοποθεσία σας, ώστε το Εργαλείο δημιουργίας τοποθεσιών να μπορεί να επιλέξει τις αλλαγές στο συστατικό στοιχείο.

  2. Αλλάξτε τη σελίδα στην κατάσταση επεξεργασίας.

  3. Μεταφέρετε και αποθέστε το συστατικό στοιχείο σας στη σελίδα.

  4. Μεταφέρετε και αποθέστε ένα συστατικό στοιχείο κουμπιού στη σελίδα.

  5. Ανοίξτε τον πίνακα "Ρυθμίσεις" για το συστατικό στοιχείο κουμπιού.

  6. Στην καρτέλα "Γενικά", αλλάξτε την "Ετικέτα" του κουμπιού σε Κάντε κλικ!

  7. Επιλέξτε την καρτέλα Δεσμός στην κορυφή του πίνακα "Ρυθμίσεις".

  8. Επιλέξτε Ενέργειες εναύσματος ως τον "Τύπο δεσμού".

  9. Κάντε κλικ στο έναυσμα Κλικ σε κουμπί για το συστατικό στοιχείο κουμπιού.

  10. Στο παράθυρο διαλόγου, αναπτύξτε το συστατικό στοιχείο A_Local_Component στην αριστερή πλευρά.

  11. Μεταφέρετε και αποθέστε την ενέργεια Ενημέρωση του πλάτους εικόνας από το συστατικό στοιχείο A_Local_Component στη δεξιά πλευρά.

  12. Εισαγάγετε 300px στο πεδίο Πλάτος εικόνας σε pixel.

  13. Αλλάξτε τη σελίδα στην κατάσταση προεπισκόπησης.

  14. Πατήστε το κουμπί Κάντε κλικ!.

Σε αυτό το σημείο το μέγεθος της εικόνας σας θα αυξηθεί σε 300px.

Σημείωση:

Τα εναύσματα και οι ενέργειες έχουν σχεδιαστεί για να υποστηρίζουν την επικοινωνία εντός συστατικού στοιχείου. Δεν έχουν σχεδιαστεί για τη δημιουργία ή τη διαχείριση κατάστασης. Εάν ανανεώσετε τη σελίδα, η σελίδα θα επιστρέψει στην αρχική της κατάσταση, χωρίς ενεργοποίηση εναυσμάτων ή εκτέλεση ενεργειών.

Συνεχίστε στην ενότητα Βήμα 9: Δημιουργία διακριτού τίτλου για κάθε στιγμιότυπο του συστατικού στοιχείου.