Interação com backbone

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 visualizações lógicas, apoiadas por modelos, cada um dos quais pode ser atualizado independentemente quando o modelo é 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 backboneContém dados e a maior parte da lógica relacionada a esses dados.

Exibição de backbone usada para representar o estado do modelo correspondente. Uma visualização de backbone na verdade se comporta como um controlador, ouvindo eventos de 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 HTMLUm modelo de invólucro que tem espaços reservados preenchidos pelo modelo.

Espaço de trabalho AEM FormsConté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 aos utilitários necessários.

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

• Uma nova instância do modelo Backbone para o 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 são inseridos na visualização.

Na visualização de 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. Esse mapeamento é iniciado assim que um componente é inicializado.

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

Um exemplo:

1. O usuário clica em um modelo de tarefa na lista de tarefa.
2. A visualização de tarefa escuta o clique e chama a função de renderização no modelo de tarefa.
3. O modelo de tarefa chama subsequentemente o serviço, que é um ponto comum para toda a comunicação com o servidor AEM Forms.
4. A classe Service chama o terminal REST do AEM Forms para método de renderização via ajax.
5. O retorno de sucesso 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 visualização, a visualização de detalhes da tarefa escuta esse evento do modelo de tarefa.
8. A visualizaçã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) para o usuário.