Modelo dinâmico para mapeamento de componentes para SPA

Última atualização em 2023-05-04
  • Tópicos
  • Developing
    Exibir mais informações sobre este tópico
  • Criado para:
  • Developer
ATENÇÃO

AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

Este documento descreve como o modelo dinâmico para mapeamento de componentes ocorre no Javascript SPA SDK for AEM.

OBSERVAÇÃO

O recurso Editor de aplicativo de página única (SPA) requer AEM 6.4 service pack 2 ou mais recente.

O Editor de SPA é a solução recomendada para projetos que exigem renderização do lado do cliente baseada em SPA estrutura (por exemplo, Reagir ou Angular).

Módulo ComponentMapping

O ComponentMapping é fornecido como um pacote NPM para o projeto front-end. Ele armazena componentes de front-end e fornece uma maneira de o Aplicativo de página única mapear componentes de front-end para AEM tipos de recursos. 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 que expõe um tipo de recurso AEM. Quando montado, o componente de front-end pode se renderizar usando o fragmento de modelo recebido das bibliotecas subjacentes.

Consulte a SPA Blueprint documento para obter mais informações sobre a análise do modelo e o acesso do componente de front-end ao modelo.

Consulte também o pacote npm: https://www.npmjs.com/package/@adobe/aem-spa-component-mapping

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 de front-end se registram no Armazenamento de mapeamento de componentes.

  2. Em seguida, Contêiner, uma vez fornecido com um modelo pela Provedor de Modelo, repete o conteúdo do modelo ( :items).

  3. No caso de uma página, seus filhos ( :children) primeiro obtenha uma classe de componente do Mapeamento de componentes e depois instancie-o.

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 inicializa-se e escuta alterações feitas no modelo que corresponde ao seu componente interno.

  2. O PageModelManager deve ser inicializado, representado pelo fluxo de inicialização.

  3. Depois de armazenado, o gerenciador de modelo de página retorna o modelo completo do aplicativo.

  4. Esse modelo é então passado para a raiz de front-end Contêiner componente do aplicativo.

  5. Partes do modelo são finalmente propagadas para cada componente filho individual.

app_model_initialization

Nesta página