Adım 11: Farklı Yerleşimleri Destekleme

Bu adımda, kullanıcının bileşenin görünümünü değiştirmesine izin veren yerleşimleri gözden geçireceğiz.

Özel bileşenler, kullanıcının seçmesine izin vermek istediğiniz sayıda yerleşimi destekleyebilir. Bu yerleşimlerin her biri özel bileşenin görünümünü değiştirir. Yerleşimler kayıt verilerinin başka bir uzantısıdır.

Örnek kodda desteklenen üç yerleşimi gözden geçirmek için appinfo.json dosyasındaki "componentLayouts" girişini gözden geçirin

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

Ayarlar panelini özel bileşenin karşısına getirdiğinizde yerleşimler arasında geçiş yapma seçeneği görürsünüz. Bileşeninizin seçimdeki değişikliğe tepki vermesini sağlamak için render.js dosyasında geçerli seçili değeri alıp bu değerdeki değişiklikleri izlemeye yönelik kod vardır.

render.js dosyasını düzenleyin ve SampleComponentViewModel nesnesine bakın.

• Şablonda referans gösterilen bir layout gözlemlenebilir nesnesi vardır:

  self.layout = ko.observable();

• Bu değer her değiştiğinde işleyen bir güncelleme fonksiyonu vardır:

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

• Başlatma kodu yerleşimin orijinal değerini alır ve güncelleme fonksiyonunu çağırır:

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

  Nitelik değişikliği izleyicisi bu nitelikteki değişiklikleri kontrol eder ve güncelleme fonksiyonunu çağırır:

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

  Son olarak, sampleComponentTemplate şablon nesnesinde bu değerdeki değişiklikleri yansıtan kod bulunur:

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

Bu değişikliklerin hepsi Ayarlar panelinde yerleşiminizi seçmenize ve bileşenin güncellenmesine izin verir.