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.

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: @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 Fornecedor 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. 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.