Modelo dinâmico para mapeamento de componentes para SPA

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

OBSERVAÇÃO

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

Módulo ComponentMapping

O módulo ComponentMapping é 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 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 campo :type 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 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 baseado em 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 na Repositório de Mapeamento de Componentes.

  2. Em seguida, o Container , uma vez fornecido com um modelo pelo Provedor de Modelo, repete o conteúdo do 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 de 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. O PageModelManager deve ser inicializado como 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 o componente raiz front-end Container do aplicativo.

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

app_model_initialization

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now