KnockoutJS - associazione componente

Questa associazione viene utilizzata per inserire un componente negli elementi DOM e passare i parametri facoltativamente. Questo legame può essere ottenuto nei seguenti due modi:

Sintassi abbreviata
Sintassi completa

Sintassi abbreviata

In questo approccio viene specificato solo il nome del componente senza specificare alcun parametro.

Syntax

<div data-bind = 'component: "component-name"'></div>

Il valore del parametro passato può essere osservabile. Pertanto, ogni volta che l'osservabile cambia, la vecchia istanza del componente verrà eliminata e quella nuova verrà creata in base al valore del parametro aggiornato.

Sintassi completa

Questo approccio accetta il parametro sotto forma di oggetto.

Syntax

<div data-bind = 'component: {
   name: "component-name",
   params: { param1: value1, param2:value2 ...}
}'></div>

L'oggetto è composto dai seguenti due elementi:

name- Questo è il nome del componente da inserire. Come accennato in precedenza, questo può essere osservabile.
params- Questo è un oggetto da passare al componente. Principalmente, questo sarà un oggetto valore-chiave che include più parametri. Questo è il più delle volte ricevuto dal costruttore di un ViewModel.

Flusso di lavoro di elaborazione dei componenti

Il diagramma seguente spiega il processo che si verifica quando un componente viene iniettato dall'associazione del componente.

Esaminiamo il processo in dettaglio -

Receive ViewModel factory and template from component loaders- Il ViewModel e il modello registrati vengono richiesti e ricevuti dal caricatore predefinito. Per impostazione predefinita, questo è un processo asincrono.

Clone the component template- In questo passaggio avviene la clonazione del template del componente e l'inserimento dello stesso nell'elemento DOM. Il contenuto esistente, se presente, verrà rimosso.

Instantiate a ViewModel if any- In questo passaggio, viene creata un'istanza di ViewModel. Se ViewModel viene fornito come funzione di costruzione, KO chiama.

new ViewModelName(params)

Se ViewModel è fornito nel formato della funzione di fabbrica, cioè createViewModel, allora chiama KO.

createViewModel(params, yourcomponentInfo)

Qui yourcomponentInfo.element è l'elemento in cui è inserito il template.

Bind ViewModel to view- In questa fase, ViewModel è associato a View. Se ViewModel non viene fornito, l'associazione viene eseguita con i parametri menzionati nell'associazione del componente.

Now component is ready- In questa fase, il componente è pronto e in forma funzionante. Il componente tiene d'occhio gli eventuali parametri osservabili in modo da scrivere i valori modificati.

Dispose the ViewModel if the component is lost- Viene chiamata la funzione dispose di ViewModel, se il valore del nome del binding del componente viene modificato in modo visibile o se un binding del flusso di controllo rimuove il contenitore dell'elemento DOM stesso, che doveva contenere l'output del componente. Lo smaltimento avviene appena prima che qualsiasi contenitore di elementi venga rimosso dal DOM.

Example

Diamo un'occhiata al seguente esempio che dimostra l'uso dell'associazione di componenti.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Component binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <h4>Component binding without parameters</h4>
      <div data-bind = 'component: "calculate-sum"'></div>

      <h4>Component binding passing parameters</h4>
      <div data-bind = 'component: {
         name: "calculate-sum",
         params: { number1: 2, number2: 3 }
      }'></div>

      <script>
         ko.components.register('calculate-sum', {
            
            viewModel: function(params) {
               this.number1 = ko.observable(params && params.number1);
               this.number2 = ko.observable(params && params.number2);

               this.result = ko.computed(function() {
                  var sum = Number(this.number1()) + Number(this.number2());
                  if ( isNaN(sum) )
                  sum = 0;
                  return sum;
               },this);
            },
            
            template: 'Enter Number One: <input data-bind = "value: number1" /> <br> <br>'+
               ' Enter Number Two: <input data-bind = "value: number2" /> <br> <br>'+
               ' Sum  = <span data-bind = "text: result" />'
         });

         ko.applyBindings();
      </script>
      
   </body>
</html>

Output

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra in formato component-bind.htm file.
Apri questo file HTML in un browser.
Immettere i numeri in entrambe le caselle di testo e osservare che la somma viene calcolata.

Osservazioni

Componenti solo modello

I componenti possono essere creati senza ViewModel. Il componente può comprendere solo un modello mostrato come segue.

ko.components.register('my-component', {
   template: '<div data-bind = "text: productName"></div>'
});

E DOM apparirà come:

<div data-bind = 'component: {
   name: "my-component",
   params: { productName: someProduct.name }
}'></div>

Utilizzo dell'associazione di componenti senza elemento contenitore DOM

Potrebbe esserci una situazione in cui non è possibile inserire un componente nell'elemento DOM. L'associazione essenziale può ancora essere eseguita con l'aiuto della sintassi senza contenitore basata sui tag di commento mostrati di seguito.

<! - ko -> e <! - / ko -> funzionano come marcatori di inizio e fine rendendola una sintassi virtuale e vincolano i dati come se fosse un vero contenitore.

Gestione e smaltimento della memoria

La funzione di smaltimento può essere aggiunta opzionalmente come parte di ViewModel. Se questa funzione è inclusa, verrà richiamata ogni volta che il componente viene perso o l'elemento contenitore stesso viene rimosso. È buona norma utilizzare la funzione dispose per rilasciare risorse occupate da oggetti indesiderati, che per impostazione predefinita non sono garbage collectable. Di seguito sono riportati alcuni esempi:

Il metodo setInterval continuerà a funzionare finché non viene cancellato esplicitamente. clearInterval (handle) viene utilizzato per interrompere questo processo.
Le proprietà ko.computed devono essere eliminate esplicitamente. Altrimenti, potrebbero continuare a ricevere notifiche dai loro osservabili sottostanti. Lo smaltimento manuale può essere evitato utilizzando pure funzioni calcolate.
Assicurati di utilizzare il metodo dispose () sulla sottoscrizione, altrimenti continua ad attivare le modifiche fino a quando non viene eliminato.
I gestori di eventi personalizzati creati su elementi DOM e creati all'interno di createViewModel devono essere eliminati.

↰ Previous page