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

Recursos do Business.Adobe.com

Ecommerce Integrations Personalized Experiences Embedded Charts Responsive Forms Document Generation Digital Rights Management