Show Menu
TÓPICOS×

Modelo dinâmico para mapeamento de componentes para SPAs

Este documento descreve como o modelo dinâmico para mapeamento de componentes ocorre no SDK do Javascript SPA para AEM.
O Editor SPA é a solução recomendada para projetos que exigem renderização do lado do cliente baseada em estrutura SPA (por exemplo, Reagir ou Angular).

Módulo ComponentMapping

O ComponentMapping módulo é fornecido como um pacote NPM para o projeto front-end. Ele armazena componentes de front-end e fornece uma maneira para o aplicativo de página única mapear componentes de front-end para tipos de recursos do AEM. Isso permite uma resolução dinâmica de componentes ao analisar o modelo JSON do aplicativo.
Cada item presente no modelo contém um :type campo que expõe um tipo de recurso AEM. Quando montado, o componente front-end pode se renderizar usando o fragmento do modelo recebido das bibliotecas subjacentes.
Consulte o documento SPA Blueprint para obter mais informações sobre a análise do modelo e o acesso do componente front-end ao modelo.

Aplicativo de página única orientado por modelo

Aplicativos de página única que usam o Javascript SPA SDK para AEM são orientados por modelo:
  1. Os componentes front-end se registram na Component Mapping Store .
  2. Em seguida, o Contêiner , uma vez fornecido com um modelo pelo Provedor de modelos, repete sobre seu conteúdo de modelo ( :items ).
  3. No caso de uma página, seus filhos ( :children ) primeiro obtêm uma classe de componente do Mapeamento de componentes e depois a instanciam.

Inicialização do aplicativo

Cada componente é estendido com os recursos do ModelProvider . Por conseguinte, a inicialização assume a seguinte forma geral:
  1. Cada provedor de modelo se inicializa e escuta as alterações feitas no modelo que corresponde ao seu componente interno.
  2. Depois de armazenado, o gerenciador de modelo de página retorna o modelo completo do aplicativo.
  3. Esse modelo é então passado para o componente front-end root Container do aplicativo.
  4. Partes do modelo são finalmente propagadas para cada componente filho individual.