단계 9: 각 구성요소 인스턴스에 대한 고유 제목 생성

이 단계는 다양한 구성요소 인스턴스에 대한 고유 제목을 생성하는 방법을 설명합니다.

구성요소를 페이지 위에 놓으면 구성요소의 배너가 A_Local_Component라는 것을 알 수 있습니다. 사용자가 구성요소들 중 하나만 페이지에 놓는 경우에는 괜찮지만, 사용자가 다양한 구성요소 인스턴스를 구별할 수 있도록 고유 제목을 생성할 수 있습니다.

Sites SDK를 사용하여 구성요소의 제목을 업데이트할 수 있습니다. 이 단계에서는 "imageBannerText" 속성에 준하여 업데이트합니다.

제목을 업데이트하려면 render.js 파일을 편집하고 이 코드를 SampleComponentViewModel 객체에 추가합니다.

self.updateDescription = ko.computed(function () {
  SitesSDK.setProperty('description', self.imageBannerText());
});

이 Knockout 컴퓨팅은 imageBannerText observable이 변경될 때마다 구성요소의 설명을 업데이트합니다.

단계 9의 결과 확인

  1. 사이트 작성기가 구성요소의 변경사항을 가져올 수 있도록 사이트의 페이지를 새로고침합니다.

  2. 페이지를 편집 모드로 전환합니다.

  3. 구성요소를 페이지 위에 놓습니다.

  4. 구성요소에 대해 설정 패널을 불러옵니다.

  5. 사용자정의 설정 단추를 누릅니다.

  6. Image Banner를 Workplace로 변경합니다.

  7. 설정 패널을 닫고 구성요소 위로 커서를 가져가서 배너를 표시합니다.

    이제 A_Local_Component Workplace가 표시되어야 합니다.

단계 10: 인라인 편집과 함께 중첩 구성요소 사용을 계속합니다.