Pasul 11: Suportul pentru diverse machete

În acest pas vom examina machetele care permit utilizatorului să modifice modul în care este afişată componenta.

O componentă personalizată poate suporta orice număr de machete din care doriţi să permiteţi utilizatorului să aleagă. Fiecare dintre aceste machete va modifica modul în care este afişată componenta personalizată. Machetele reprezintă o altă extensie la datele de înregistrare.

Pentru a verifica cele trei machete acceptate în codul exemplu, verificaţi intrarea "componentLayouts" din fişierul appinfo.json

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

Dacă deschideţi panoul Setări în raport cu componenta personalizată, veţi vedea o opţiune de comutare între machete. Pentru a permite componentei dvs. să reacţioneze la modificarea selecţiei, fişierul render.js are cod pentru a obţine valoarea selectată curent şi pentru a asculta modificările aduse acestei valori.

Editaţi fişierul render.js şi uitaţi-vă la obiectul SampleComponentViewModel.

• Există o valoare observable de machetă, la care se face referire în şablonul respectiv:

  self.layout = ko.observable();

• Există o funcţie de actualizare, pentru a gestiona de fiecare dată modificarea acestei valori:

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

• Codul de iniţializare obţine valoarea originală pentru macheta respectivă şi apelează funcţia de actualizare:

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

  Un listener de modificare a proprietăţii verifică toate modificările aduse a cestei proprietăţi şi apelează funcţia de actualizare:

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

  În cele din urmă, obiectul şablon sampleComponentTemplate are cod pentru a reflecta modificările acestei valori:

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

Împreună, aceste modificări vă permit să selectaţi macheta în panoul Setări şi să aveţi componenta actualizată.