단계 11: 다양한 레이아웃 지원

이 단계에서는 구성요소 표시 방식을 사용자가 변경할 수 있는 레이아웃을 검토합니다.

사용자정의 구성요소는 사용자가 선택할 수 있는 레이아웃을 원하는 만큼 지원할 수 있습니다. 각 레이아웃은 사용자정의 구성요소의 표시 방식을 변경합니다. 레이아웃은 등록 데이터의 또 다른 확장입니다.

샘플 코드에 지원되는 세 가지 레이아웃을 검토하려면 appinfo.json 파일의 "componentLayouts" 항목을 검토합니다.

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

사용자정의 구성요소에 대해 설정 패널을 불러오면 레이아웃 간을 전환하는 옵션이 표시됩니다. 구성요소가 선택 변경에 반응할 수 있도록 render.js 파일에는 현재 선택된 값을 가져와서 이 값의 변경사항을 수신하는 코드가 있습니다.

render.js 파일을 편집하고 SampleComponentViewModel 객체를 살펴봅니다.

• 템플리트에서 참조된 layout 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\' -->' +

이러한 변경사항을 모아 설정 패널에서 레이아웃을 선택하고 구성요소를 업데이트할 수 있습니다.