Βήμα 11: Υποστήριξη διαφορετικών διατάξεων

Σε αυτό το βήμα θα εξετάσουμε διατάξεις που επιτρέπουν στον χρήστη να τροποποιήσει το πώς εμφανίζεται το συστατικό στοιχείο.

Ένα προσαρμοσμένο συστατικό στοιχείο μπορεί να υποστηρίξει διάφορες διατάξεις που θέλετε να επιτρέψετε στον χρήστη να επιλέξει. Καθεμία από αυτές τις διατάξεις θα τροποποιούν το πώς εμφανίζεται το προσαρμοσμένο συστατικό στοιχείο. Οι διατάξεις είναι μια ακόμη επέκταση στα δεδομένα εγγραφής.

Για να εξετάσετε τις τρεις διατάξεις που υποστηρίζονται στο δείγμα κώδικα, εξετάστε την καταχώριση "componentLayouts" στο αρχείο appinfo.json .

    "componentLayouts": [
      {
        "name": "default",
        "displayName": "IMAGE_LEFT_LAYOUT"
      },
      {
        "name": "right",
        "displayName": "IMAGE_RIGHT_LAYOUT"
      },
      {
        "name": "top",
        "displayName": "IMAGE_TOP_LAYOUT"
      }
    ],

Εάν εμφανίσετε τον πίνακα "Ρυθμίσεις" για το προσαρμοσμένο συστατικό στοιχείο, θα δείτε μια επιλογή εναλλαγής μεταξύ διατάξεων. Για να επιτρέψετε στο συστατικό στοιχείο σας να αντιδράσει στην αλλαγή της επιλογής, το αρχείο render.js διαθέτει κώδικα για να λάβει την τρέχουσα επιλεγμένη τιμή και να κάνει ακρόαση για αλλαγές σε αυτήν την τιμή.

Επεξεργαστείτε το αρχείο render.js και εντοπίστε το αντικείμενο SampleComponentViewModel.

• Υπάρχει ένα observable αντικείμενο διάταξης, το οποίο αναφέρεται στο πρότυπο:

  self.layout = ko.observable();

• Υπάρχει μια συνάρτηση ενημέρωσης προς χειρισμό κάθε φορά που αλλάζει αυτή η τιμή:

      self.updateComponentLayout = $.proxy(function (componentLayout) {
        var layout = componentLayout ? componentLayout : 'default';
        self.layout(layout);
        self.alignImage(layout === 'right' ? 'right' : 'left');
        self.showTopLayout(layout === 'top');
        self.showStoryLayout(layout === 'default' || layout === 'right');
  
        self.componentLayoutInitialized(true);
      }, self);

• Ο κώδικας αρχικοποίησης λαμβάνει την αρχική τιμή για τη διάταξη και καλεί τη συνάρτηση ενημέρωσης:

  SitesSDK.getProperty('componentLayout', self.updateComponentLayout);

  Η λειτουργία ακρόασης αλλαγών ιδιοτήτων ελέγχει για αλλαγές σε αυτήν την ιδιότητα και καλεί τη συνάρτηση ενημέρωσης:

  self.updateSettings = function (settings) {
    if (settings.property === 'componentLayout') {
      self.updateComponentLayout(settings.value);
    } else if (settings.property === 'customSettingsData') {
      self.updateCustomSettingsData(settings.value);
    }
  };
  
  SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(self.updateSettings, self));

  Τέλος, το αντικείμενο προτύπου sampleComponentTemplate διαθέτει κώδικα που αντικατοπτρίζει τις αλλαγές σε αυτήν την τιμή:

  '<!-- ko if: alignImage() === \'right\' -->' +

Μαζί, αυτές οι αλλαγές σάς επιτρέπουν να επιλέξετε τη διάταξή σας στον πίνακα "Ρυθμίσεις" και να έχετε την ενημέρωση συστατικού στοιχείου.