Interazione con la colonna vertebrale backbone-interaction
Backbone è una libreria che aiuta a creare e seguire l'architettura MVC nelle applicazioni web. L’idea di base di Backbone consiste nell’organizzare l’interfaccia in viste logiche, affiancate da modelli, ciascuno dei quali può essere aggiornato in modo indipendente quando il modello cambia, senza dover ridisegnare la pagina. Per ulteriori informazioni sulla colonna vertebrale, consulta https://backbonejs.org.
Alcuni concetti chiave sono i seguenti:
Modello a spina dorsale Contiene dati e la maggior parte della logica relativa a tali dati.
Vista dorsale Utilizzato per rappresentare lo stato del modello corrispondente. La visualizzazione backbone si comporta come un controller, ascoltando eventi dell'interfaccia utente come i clic dell'utente o per modellare eventi (come i dati modificati) e modifica l'interfaccia utente in base alle necessità.
Modello HTML Un modello di wrapper con segnaposto popolati dal modello.
Area di lavoro di AEM Forms Contiene diversi componenti singoli. Ogni componente:
- Rappresenta un singolo elemento dell’interfaccia utente logica.
- Può essere una raccolta di componenti simili.
- È costituito da modello Backbone, vista Backbone e modello HTML.
- Contiene un riferimento a un servizio.
- Contiene un riferimento alle utility richieste.
Quando un componente viene inizializzato, vengono creati i seguenti oggetti:
- Viene creata una nuova istanza di modello Backbone per il componente. Il servizio viene inserito nel modello.
- Viene creata una nuova istanza della vista Backbone.
- L'istanza del modello, del modello HTML e delle utility corrispondenti viene inserita nella vista.
Nella vista Backbone è presente una mappa evento che mappa i vari eventi che possono verificarsi a causa delle interazioni dell’interfaccia utente con un gestore corrispondente. Questa mappatura viene avviata una volta inizializzato un componente.
Quando una visualizzazione viene inizializzata, la visualizzazione chiama il modello corrispondente per recuperare i dati dal server. Quando tutti i dati richiesti da una visualizzazione sono disponibili, la visualizzazione esegue il rendering dei dati nel formato specificato dal modello di HTML. Più visualizzazioni possono condividere lo stesso modello per la comunicazione.
Esempio:
- L'utente fa clic su un modello di attività nell'elenco delle attività.
- La visualizzazione attività ascolta il clic e chiama la funzione di rendering sul modello attività.
- Il modello di task successivamente chiama il servizio che è un punto comune per tutte le comunicazioni con il server AEM Forms.
- La classe di servizio chiama l’endpoint REST di AEM Forms per il metodo di rendering tramite ajax.
- Il callback di successo per questa chiamata Ajax è definito nel modello di task.
- Il modello di task genera un evento di backbone come notifica del completamento della chiamata di rendering.
- Un'altra visualizzazione, la visualizzazione dei dettagli dell'attività, ascolta l'evento dal modello di task.
- La visualizzazione dei dettagli dell'attività modifica quindi il modello dei dettagli dell'attività in modo da visualizzare all'utente l'attività di cui è stato eseguito il rendering (modulo, dettagli, allegati, note e così via).