Interação backbone backbone-interaction
O Backbone é uma biblioteca que ajuda a criar e a seguir a arquitetura MVC em aplicações Web. A ideia básica do Backbone é organizar sua interface em visualizações lógicas, apoiadas por modelos, cada um dos quais pode ser atualizado independentemente quando o modelo muda, sem precisar redesenhar a página. Para obter mais informações sobre o Backbone, consulte https://backbonejs.org.
Alguns conceitos principais são os seguintes:
Modelo de backbone Contém dados e a maior parte da lógica relacionada a esses dados.
Modo de exibição de backbone Usado para representar o estado do modelo correspondente. Uma exibição de backbone se comporta realmente como um controlador, ouvindo eventos da interface do usuário como cliques do usuário ou eventos de modelo (como dados alterados) e modifica a interface do usuário conforme apropriado.
modelo HTML Um modelo de invólucro que tem espaços reservados preenchidos pelo modelo.
Workspace do AEM Forms Contém vários componentes individuais. Cada componente:
- Representa um único elemento da interface de usuário lógico.
- Pode ser uma coleção de componentes semelhantes.
- Composto pelo modelo Backbone, visualização Backbone e modelo HTML.
- Contém referência a um serviço.
- Contém referência aos utilitários necessários.
Quando um componente é inicializado, os seguintes objetos são criados:
- Uma nova instância do modelo de Backbone para o componente é criada. Serviço inserido no modelo.
- Uma nova instância da exibição de Backbone é criada.
- Instância do modelo correspondente, modelo de HTML e Utilitários são inseridos na visualização.
Na visualização Backbone, há um mapa de eventos que mapeia os vários eventos que podem surgir devido às interações da interface do usuário com um manipulador correspondente. Este mapeamento é iniciado assim que um componente é inicializado.
Quando uma exibição é inicializada, ela chama seu modelo correspondente para buscar dados do servidor. Quando todos os dados exigidos por uma visualização estão disponíveis, a visualização renderiza os dados no formato especificado pelo modelo de HTML. Várias exibições podem compartilhar o mesmo modelo para comunicação.
Um exemplo:
- O usuário clica em um modelo de tarefa na lista de tarefas.
- A exibição Tarefa escuta o clique e chama a função de renderização no modelo de tarefa.
- O modelo de tarefa chama o serviço, que é um ponto comum para toda a comunicação com o servidor do AEM Forms.
- A classe de serviço chama o ponto de extremidade REST do AEM Forms para o método de renderização via ajax.
- O retorno de chamada bem-sucedido desta invocação do Ajax é definido no template de tarefa.
- O modelo de tarefa gera um evento de backbone quando uma notificação de chamada de renderização é concluída.
- Outra exibição, exibição de detalhes da tarefa, escuta esse evento do modelo de tarefa.
- A exibição de 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) ao usuário.