Modelo dinâmico para mapeamento de componentes para SPAs dynamic-model-to-component-mapping-for-spas
Este documento descreve como o modelo dinâmico para mapeamento de componentes ocorre no JavaScript SPA SDK for AEM.
- O editor universal para editar conteúdo headless visualmente.
- O editor de fragmentos de conteúdo para editar conteúdo headless com base em formulários.
Módulo ComponentMapping componentmapping-module
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 do AEM. O módulo 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 de front-end pode ser renderizado usando o fragmento de modelo que recebeu das bibliotecas subjacentes.
Consulte o documento Blueprint do SPA para obter mais informações sobre análise de modelo e acesso do componente front-end ao modelo.
Consulte também o pacote npm: @adobe/aem-spa-component-mapping
Aplicativo de página única orientado por modelo model-driven-single-page-application
Os aplicativos de página única que usam o JavaScript SPA SDK para AEM são orientados por modelo:
-
Os componentes front-end se registram no Repositório de Mapeamentos de Componentes.
-
Em seguida, o Contêiner, uma vez fornecido com um modelo pelo Provedor de Modelos, repete o conteúdo do modelo (
:items). -
Se houver uma página, seus filhos (
:children) obterão primeiro uma classe de componente do Mapeamento de Componentes e a instanciarão.
Inicialização do aplicativo app-initialization
Cada componente é estendido com os recursos do ModelProvider. A inicialização assume a seguinte forma geral:
-
Cada provedor de modelo se inicializa e escuta as alterações feitas na parte do modelo que corresponde ao componente interno.
-
O
PageModelManagerdeve ser inicializado como representado pelo fluxo de inicialização. -
Depois de armazenado, o gerenciador de modelo de página retorna o modelo completo do aplicativo.
-
Este modelo é então passado para o componente raiz de front-end Container do aplicativo.
-
Partes do modelo são finalmente propagadas para cada componente filho individual.
