KnockoutJS - Osservabili

KnockoutJS si basa sui seguenti 3 concetti importanti.

  • Osservabili e monitoraggio delle dipendenze tra di loro: gli elementi DOM sono collegati a ViewModel tramite "data-bind". Si scambiano informazioni tramite Observables. Questo si occupa automaticamente del monitoraggio delle dipendenze.

  • Associazioni dichiarative tra UI e ViewModel: gli elementi DOM sono connessi a ViewModel tramite il concetto di "data-bind".

  • Modelli per creare componenti riutilizzabili: i modelli forniscono un modo affidabile per creare applicazioni web complesse.

Studieremo gli osservabili in questo capitolo.

Come specifica il nome, quando si dichiara un dato / proprietà ViewModel come Osservabile, qualsiasi modifica dei dati ogni volta viene riflessa automaticamente in tutti i punti in cui vengono utilizzati i dati. Ciò include anche l'aggiornamento delle dipendenze correlate. KO si occupa di queste cose e non è necessario scrivere codice aggiuntivo per ottenere ciò.

Utilizzando Observable, diventa molto facile far comunicare in modo dinamico UI e ViewModel.

Sintassi

Hai solo bisogno di dichiarare la proprietà ViewModel con la funzione ko.observable() per renderlo osservabile.

this.property = ko.observable('value');

Esempio

Diamo un'occhiata al seguente esempio che dimostra l'uso di Observable.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Observable Example</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>Enter your name: <input data-bind = "value: yourName" /></p>
      <p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->

         function AppViewModel() {
            this.yourName = ko.observable("");
         }

         // Activates knockout.js
         ko.applyBindings(new AppViewModel());
      </script>
   </body>
</html>

La riga seguente è per la casella di input. Come si può vedere, abbiamo utilizzato l'attributo data-bind per associare il valore yourName a ViewModel.

<p>Enter your name: <input data-bind = "value: yourName" /> <p>

La riga seguente stampa solo il valore di yourName. Nota, che qui il tipo di data-bind è il testo poiché stiamo semplicemente leggendo il valore.

<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

Nella riga seguente, ko.observable tiene d'occhio la variabile yourName per qualsiasi modifica nei dati. Una volta apportata una modifica, anche le posizioni corrispondenti vengono aggiornate con il valore modificato. Quando esegui il codice seguente, verrà visualizzata una casella di input. Man mano che aggiorni quella casella di input, il nuovo valore verrà riflesso o aggiornato ovunque venga utilizzato.

this.yourName = ko.observable("");

Produzione

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

  • Salva il codice sopra in formato first_observable_pgm.htm file.

  • Apri questo file HTML in un browser.

  • Immettere il nome come Scott e osservare che il nome si riflette nell'output.

La modifica dei dati può avvenire dall'interfaccia utente o da ViewModel. Indipendentemente da dove vengono modificati i dati, l'interfaccia utente e ViewModel mantengono la sincronizzazione tra di loro. Questo lo rende un meccanismo di rilegatura a due vie. Nell'esempio sopra, quando si modifica il nome nella casella di input, ViewModel ottiene un nuovo valore. Quando modifichi la proprietà yourName dall'interno di ViewModel, l'interfaccia utente riceve un nuovo valore.

Leggere e scrivere osservabili

La tabella seguente elenca le operazioni di lettura e scrittura che possono essere eseguite sugli osservabili.

Sr.No. Operazione di lettura / scrittura e sintassi
1

Read

Per leggere il valore basta chiamare la proprietà Observable senza parametri come: AppViewModel.yourName ();
2

Write

Per scrivere / aggiornare il valore nella proprietà Observable, è sufficiente passare il valore desiderato in un parametro come: AppViewModel.yourName ('Bob');
3

Write multiple

Più proprietà ViewModel possono essere aggiornate in una singola riga con l'aiuto della sintassi concatenata come: AppViewModel.yourName ('Bob'). YourAge (45);

Array osservabili

La dichiarazione osservabile si occupa delle modifiche dei dati di un singolo oggetto. ObservableArray funziona con la raccolta di oggetti. Questa è una funzione molto utile quando si ha a che fare con applicazioni complesse contenenti più tipi di valori e si cambia frequentemente il loro stato in base alle azioni dell'utente.

Sintassi

this.arrayName = ko.observableArray();    // It's an empty array

L'array osservabile tiene traccia solo degli oggetti aggiunti o rimossi. Non notifica se le proprietà del singolo oggetto vengono modificate.

Inizializzalo per la prima volta

Puoi inizializzare il tuo array e allo stesso tempo puoi dichiararlo come Osservabile passando i valori iniziali al costruttore come segue.

this.arrayName = ko.observableArray(['scott','jack']);

Lettura da Observable Array

È possibile accedere agli elementi dell'array Observable come segue.

alert('The second element is ' + arrayName()[1]);

Funzioni ObservableArray

KnockoutJS ha il proprio set di funzioni di array osservabili. Sono convenienti perché:

  • Queste funzioni funzionano su tutti i browser.

  • Queste funzioni si occuperanno automaticamente del rilevamento delle dipendenze.

  • La sintassi è facile da usare. Ad esempio, per inserire un elemento in un array, è sufficiente utilizzare arrayName.push ('value') invece di arrayName (). Push ('value').

Di seguito è riportato l'elenco dei vari metodi Observable Array.

Sr.No. Metodi e descrizione
1 push ('valore')

Inserisce un nuovo elemento alla fine della matrice.
2 pop()

Rimuove l'ultimo elemento dall'array e lo restituisce.
3 unshift ('valore')

Inserisce un nuovo valore all'inizio della matrice.
4 cambio()

Rimuove il primo elemento dall'array e lo restituisce.
5 inversione()

Inverte l'ordine dell'array.
6 ordinare()

Ordina gli elementi dell'array in ordine crescente.
7 giunzione (indice iniziale, indice finale)

Accetta 2 parametri - start-index e end-index - rimuove gli elementi dall'inizio alla fine dell'indice e li restituisce come un array.
8 indexOf ('valore')

Questa funzione restituisce l'indice della prima occorrenza del parametro fornito.
9 slice (indice iniziale, indice finale)

Questo metodo taglia una parte di un array. Restituisce gli elementi dall'indice iniziale fino all'indice finale.
10 Rimuovi tutto()

Rimuove tutti gli elementi e li restituisce come un array.
11 remove ('value')

Rimuove gli elementi che corrispondono al parametro e restituisce un array.
12 rimuovere (funzione (elemento) {condizione})

Rimuove gli elementi che soddisfano la condizione e li restituisce come un array.
13 rimuovi ([insieme di valori])

Rimuove gli elementi che corrispondono a un determinato insieme di valori.
14

destroyAll()

Contrassegna tutti gli elementi in un array con la proprietà _destroy con valore true.
15

destroy('value')

Cerca un elemento uguale al parametro e lo contrassegna con una proprietà speciale _destroy con valore true.
16

destroy(function(item) { condition})

Trova tutti gli elementi che soddisfano la condizione, li contrassegna con la proprietà _destroy con valore vero.
17

destroy([set of values])

Trova gli elementi che corrispondono a un dato insieme di valori, li contrassegna come _destroy con valore vero.

Note - Le funzioni Destroy e DestroyAll di ObservableArrays sono principalmente per gli sviluppatori "Ruby on Rails".

Quando si utilizza il metodo destroy, gli elementi corrispondenti non vengono realmente eliminati dall'array in quel momento, ma vengono resi nascosti contrassegnandoli con la proprietà _destroy con valore true in modo che non possano essere letti dall'interfaccia utente. Gli elementi contrassegnati come _destroy uguale a true vengono eliminati in un secondo momento durante la gestione del grafico a oggetti JSON.