Aurelia - Ciclo di vita dei componenti

Aurelia utilizza i metodi del ciclo di vita dei componenti per manipolare il ciclo di vita dei componenti. In questo capitolo, ti mostreremo questi metodi e spiegheremo il ciclo di vita dei componenti.

• constructor()- Il metodo del costruttore viene utilizzato per inizializzare un oggetto creato con una classe. Questo metodo viene chiamato per primo. Se non si specifica questo metodo, verrà utilizzato il costruttore predefinito.

• created(owningView, myView)- Questo viene chiamato una volta che la vista e il modello di visualizzazione sono stati creati e collegati al controller. Questo metodo richiede due argomenti. Il primo è la vista in cui viene dichiarato il componente(owningView). La seconda è la vista dei componenti(myView).

• bind(bindingContext, overrideContext)- A questo punto, l'associazione è iniziata. Il primo argomento rappresenta il contesto di associazione del componente. Il secondo èoverrideContext. Questo argomento viene utilizzato per aggiungere ulteriori proprietà contestuali.

• attached() - Il metodo allegato viene richiamato una volta che il componente è collegato al DOM.

• detached() - Questo metodo è opposto a attached. Viene richiamato quando il componente viene rimosso dal DOM.

• unbind() - L'ultimo metodo del ciclo di vita è unbind. Viene chiamato quando il componente non è associato.

I metodi del ciclo di vita sono utili quando si desidera avere un maggiore controllo sul componente. È possibile utilizzarli quando è necessario attivare alcune funzionalità in un determinato momento del ciclo di vita dei componenti.

Tutti i metodi del ciclo di vita sono mostrati di seguito.

app.js

export class App {
   constructor(argument) {
      // Create and initialize your class object here...
   }

   created(owningView, myView) {
      // Invoked once the component is created...
   }

   bind(bindingContext, overrideContext) {
      // Invoked once the databinding is activated...
   }

   attached(argument) {
      // Invoked once the component is attached to the DOM...
   }

   detached(argument) {
      // Invoked when component is detached from the dom
   }

   unbind(argument) {
      // Invoked when component is unbound...
   }
}