Show Menu
화제×

SPA에 대한 동적 모델-구성 요소 매핑

이 문서에서는 AEM용 JavaScript SPA SDK에서 구성 요소에 대한 동적 모델 매핑이 발생하는 방법에 대해 설명합니다.
SPA 편집기는 SPA 프레임워크 기반의 클라이언트측 렌더링(예: 반응 또는 각도)이 필요한 프로젝트에 권장되는 솔루션입니다.

ComponentMapping 모듈

ComponentMapping 모듈은 프런트 엔드 프로젝트에 NPM 패키지로 제공됩니다. 프런트 엔드 구성 요소를 저장하고 단일 페이지 애플리케이션이 프런트 엔드 구성 요소를 AEM 리소스 유형에 매핑할 수 있는 방법을 제공합니다. 이렇게 하면 애플리케이션의 JSON 모델을 구문 분석할 때 구성 요소의 동적 해상도를 사용할 수 있습니다.
모델에 있는 각 항목에는 AEM 리소스 유형을 표시하는 :type 필드가 포함되어 있습니다. 마운트되면 프런트 엔드 구성 요소는 기본 라이브러리에서 받은 모델 조각을 사용하여 자체 렌더링할 수 있습니다.
모델 구문 분석 및 모델에 대한 프런트 엔드 구성 요소 액세스에 대한 자세한 내용은 SPA Blueprint 문서를 참조하십시오.

모델 중심의 단일 페이지 애플리케이션

AEM용 Javascript SPA SDK를 활용하는 단일 페이지 애플리케이션은 모델 기반입니다.
  1. 프런트 엔드 구성 요소는 구성 요소 매핑 저장소에 등록합니다 .
  2. 그런 다음 모델 제공자가 모델과 함께 제공했다면 컨테이너는 해당 모델 컨텐트( )를 :items 반복합니다.
  3. 페이지의 경우, 페이지의 하위( :children )는 먼저 구성 요소 매핑에서 구성 요소 클래스를 가져온 다음 인스턴스화합니다.

앱 초기화

각 구성 요소는 의 기능으로 확장됩니다 ModelProvider . 따라서 초기화는 다음과 같은 일반 양식을 사용합니다.
  1. 각 모델 제공자는 자체 초기화를 통해 내부 구성 요소에 해당하는 모델 부분의 변경 사항을 수신합니다.
  2. 초기화 흐름으로 SPA 블루프린트 표시된 대로 초기화해야 합니다.
  3. 페이지 모델 관리자가 저장되면 앱의 전체 모델이 반환됩니다.
  4. 그런 다음 이 모델은 응용 프로그램의 프런트 엔드 루트 컨테이너 구성 요소로 전달됩니다.
  5. 모델의 조각은 결국 개별 하위 구성 요소에 전파됩니다.