지연 로드를 지원하는 섹션 레이아웃 생성

콘텐츠 목록은 추가 구성요소가 질의될 때 섹션 레이아웃을 호출할 수 있습니다.

콘텐츠 목록을 렌더링할 때 반환되는 모든 콘텐츠 항목을 렌더링하기 위해 섹션 레이아웃을 선택할 수 있는 옵션이 있습니다. 이를 통해 테이블, 슬라이더 또는 8열 레이아웃과 같이 콘텐츠 항목마다 다른 레이아웃을 생성할 수 있습니다. 이 사용자정의 섹션 레이아웃은 더 고급 페이지 매김 기능에 참여할 수도 있습니다.

콘텐츠 목록은 다음과 같은 페이지 매김을 지원합니다.

  • 페이지 매김
  • 스크롤 시 로드
  • 누를 때 로드

표준 페이지 매김 기능의 경우 섹션 레이아웃이 아무것도 수행할 필요가 없습니다. 사용자가 다음 페이지를 누르면 다음 항목 집합으로 다시 렌더링됩니다. 그러나 스크롤 시 로드누를 때 로드의 경우 섹션 레이아웃을 다시 렌더링하지 않고 추가 구성요소가 섹션 레이아웃에 추가됩니다. 주로 처음 n개 항목을 로드하고 사용자가 페이지 아래로 스크롤할 때 다음 항목 집합을 인출/렌더링하는 무한 스크롤 모델에 사용됩니다. 스크롤 시 로드누를 때 로드를 지원하려면 사용자정의 섹션 레이아웃에서 다음을 수행해야 합니다.

  1. render.js: addComponent() API를 구현합니다. 이것은 섹션 레이아웃에 추가될 각각의 새 구성요소와 함께 호출됩니다.

    // dynamic API for adding additional components through "load more" when used in a Content List
               addComponent: function (parentObj, component) {     
                   // create the component div and add it to the parent object
                   $(parentObj).append(this.createComponentDiv(component)); 
               }
  2. appInfo.json: 다음 항목을 포함하여 섹션 레이아웃이 addComponent() API를 지원함을 콘텐츠 목록에 알립니다.

    "contentListData": {  
      "addComponent": true
    },

appInfo.json이 업데이트된 후에 사용자가 설정 패널에서 이 섹션 레이아웃을 선택하고 페이지 매김 화면으로 이동하면 누를 때 로드스크롤 시 로드 옵션이 표시됩니다.