Interação entre backbone backbone-interaction

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

Backbone é uma biblioteca que ajuda a criar e seguir a arquitetura MVC em aplicativos da Web. A ideia básica do Backbone é organizar sua interface em exibições lógicas, apoiadas por modelos, que podem ser atualizadas independentemente quando o modelo for alterado, sem precisar redesenhar a página. Para obter mais informações sobre Backbone, consulte https://backbonejs.org.

Alguns conceitos-chave são os seguintes:

Modelo de backbone Contém dados e a maior parte da lógica relacionada a esses dados.

Exibição de backbone Usado para representar o estado do modelo correspondente. Na verdade, uma visualização de backbone se comporta como um controlador, ouvindo eventos da interface do usuário, como cliques do usuário, ou para modelar eventos (como dados alterados) e modifica a interface do usuário, conforme apropriado.

modelo HTML Um modelo de wrapper que tem espaços reservados preenchidos pelo modelo.

Área de trabalho do AEM Forms Contém vários componentes individuais. Cada componente:

  • Representa um único elemento lógico da interface do usuário.
  • Pode ser uma coleção de componentes semelhantes.
  • Composto por modelo Backbone, visualização Backbone e modelo HTML.
  • Contém referência a um serviço.
  • Contém referência a utilitários necessários.

Quando um componente é inicializado, os seguintes objetos são criados:

  • Uma nova instância do modelo Backbone do componente é criada. O serviço é inserido no modelo.
  • Uma nova instância da visualização Backbone é criada.
  • A instância do modelo correspondente, modelo HTML e Utilitários é inserida na exibição.

Na exibição Backbone, há um mapa de eventos que mapeia os vários eventos que podem surgir devido a interações da interface do usuário com um manipulador correspondente. Esse mapeamento é iniciado assim que um componente é inicializado.

Quando uma exibição é inicializada, a exibição chama seu modelo correspondente para buscar dados do servidor. Quando todos os dados exigidos por uma exibição estiverem disponíveis, ela renderizará os dados no formato especificado pelo modelo HTML. Várias exibições podem compartilhar o mesmo modelo para comunicação.

Um exemplo:

  1. O usuário clica em um template de tarefa na lista de tarefas.
  2. A exibição Tarefa escuta o clique e chama a função de renderização no modelo de tarefa.
  3. Posteriormente, o modelo de tarefa chama o serviço, que é um ponto comum para toda a comunicação com o servidor AEM Forms.
  4. A classe de serviço chama o endpoint REST do AEM Forms para método de renderização via ajax.
  5. O retorno de chamada bem-sucedido para esta invocação Ajax é definido no modelo de tarefa.
  6. O modelo de tarefa gera um evento de backbone como uma notificação de conclusão da chamada de renderização.
  7. Outra exibição, exibição de detalhes da tarefa, escuta esse evento do modelo de tarefa.
  8. A exibição Detalhes da tarefa altera o modelo de detalhes da tarefa para exibir a tarefa renderizada (formulário, detalhes, anexos, observações e assim por diante) para o usuário.
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da