KnockoutJS - Associazioni dichiarative

L'associazione dichiarativa in KnockoutJS fornisce un modo potente per connettere i dati all'interfaccia utente.

È importante comprendere la relazione tra binding e osservabili. Tecnicamente, questi due sono diversi. È possibile utilizzare un normale oggetto JavaScript poiché ViewModel e KnockoutJS possono elaborare correttamente l'associazione di View.

Senza Observable, la proprietà dell'interfaccia utente verrà elaborata solo per la prima volta. In questo caso, non può essere aggiornato automaticamente in base all'aggiornamento dei dati sottostante. Per ottenere ciò, i collegamenti devono essere riferiti a proprietà osservabili.

Sintassi vincolante

La rilegatura è composta da 2 elementi, la rilegatura name e value. Di seguito è riportato un semplice esempio:

Today is : <span data-bind = "text: whatDay"></span>

Qui, il testo è il nome dell'associazione e whatDay è il valore dell'associazione. È possibile avere più associazioni separate da virgola, come mostrato nella sintassi seguente.

Your name: <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />

Qui, il valore viene aggiornato dopo ogni pressione del tasto.

Valori vincolanti

Il valore di associazione può essere a single value, literal, a variable o può essere un file JavaScriptespressione. Se l'associazione fa riferimento a qualche espressione o riferimento non valido, KO produrrà un errore e interromperà l'elaborazione dell'associazione.

Di seguito sono riportati alcuni esempi di associazioni.

<!-- simple text binding -->
<p>Enter employee name: <input   -bind = 'value: empName' /></p>

<!-- click binding, call a specific function -->
<button data-bind="click: sortEmpArray">Sort Array</button>

<!-- options binding -->
<select multiple = "true" size = "8" data-bind = "options: empArray , 
   selectedOptions: chosenItem"> </select>

Notare i seguenti punti:

  • Gli spazi bianchi non fanno alcuna differenza.

  • A partire da KO 3.0, puoi saltare il valore di binding che darà al binding un valore indefinito.

Contesto vincolante

I dati che vengono utilizzati nelle associazioni correnti possono essere referenziati da un oggetto. Questo oggetto è chiamatobinding context.

La gerarchia del contesto viene creata e gestita automaticamente da KnockoutJS. La tabella seguente elenca i diversi tipi di contesti di associazione forniti da KO.

Sr.No. Tipi di contesto vincolanti e descrizione
1

$root

Si riferisce sempre al ViewModel di livello superiore. Ciò rende possibile accedere ai metodi di primo livello per manipolare ViewModel. Questo di solito è l'oggetto, che viene passato a ko.applyBindings.
2

$data

Questa proprietà è molto simile thisparola chiave nell'oggetto Javascript. La proprietà $ data in un contesto di associazione fa riferimento all'oggetto ViewModel per il contesto corrente.
3

$index

Questa proprietà contiene l'indice di un elemento corrente di un array all'interno di un ciclo foreach. Il valore di $ index cambierà automaticamente come e quando l'array Observable sottostante viene aggiornato. Ovviamente, questo contesto è disponibile solo perforeach attacchi.
4

$parent

Questa proprietà fa riferimento all'oggetto ViewModel principale. Ciò è utile quando si desidera accedere alle proprietà ViewModel esterne dall'interno di un ciclo nidificato.
5

$parentContext

Viene chiamato l'oggetto contesto che è vincolato al livello padre $parentContext. Questo è diverso da$parent. $ parent si riferisce ai dati. Mentre $ parentContext si riferisce al contesto di associazione. Ad esempio, potrebbe essere necessario accedere all'indice dell'elemento esterno foreach da un contesto interno.
6

$rawdata

Questo contesto contiene il valore ViewModel grezzo nella situazione corrente. Questo assomiglia a $ data ma la differenza è che se ViewModel è racchiuso in Observable, $ data viene semplicemente scartato. ViewModel e $ rawdata diventano dati osservabili effettivi.
7

$component

Questo contesto viene utilizzato per fare riferimento a ViewModel di quel componente, quando ci si trova all'interno di un particolare componente. Ad esempio, potresti voler accedere ad alcune proprietà da ViewModel invece dei dati correnti nella sezione template del componente.
8

$componentTemplateNodes

Questo rappresenta un array di nodi DOM passati a quel particolare componente quando ci si trova all'interno di un modello di componente specifico.

I seguenti termini sono disponibili anche in forma vincolante ma non sono effettivamente un contesto vincolante.

  • $context - Questo non è altro che un oggetto contesto di associazione esistente.

  • $element - Questo oggetto fa riferimento a un elemento in DOM nell'associazione corrente.

Lavorare con testo e aspetti

Di seguito è riportato un elenco di tipi di binding forniti da KO per gestire il testo e gli aspetti visivi.

Sr.No. Tipo di rilegatura e utilizzo
1 visibile: <binding-condition>

Per mostrare o nascondere l'elemento HTML DOM a seconda di determinate condizioni.
2 testo: <binding-value>

Per impostare il contenuto di un elemento HTML DOM.
3 html: <binding-value>

Per impostare il contenuto del markup HTML di un elemento DOM.
4 css: <binding-object>

Per applicare classi CSS a un elemento.
5 stile: <binding-object>

Per definire l'attributo di stile inline di un elemento.
6 attr: <binding-object>

Per aggiungere attributi a un elemento in modo dinamico.

Lavorare con le associazioni del flusso di controllo

Di seguito è riportato un elenco dei tipi di binding del flusso di controllo forniti da KO.

Sr.No. Tipo di rilegatura e utilizzo
1 foreach: <binding-array>

In questa associazione, ogni elemento della matrice viene referenziato nel markup HTML in un ciclo.
2 if: <binding-condition>

Se la condizione è vera, verrà elaborato il markup HTML specificato. Altrimenti, verrà rimosso da DOM.
3 ifnot: <binding-condition>

Negazione di If. Se la condizione è vera, verrà elaborato il markup HTML specificato. Altrimenti, verrà rimosso da DOM.
4 con: <binding-object>

Questa associazione viene utilizzata per associare gli elementi figlio di un oggetto nel contesto dell'oggetto specificato.
5 componente: <component-name> OR component: <component-object>

Questa associazione viene utilizzata per inserire un componente negli elementi DOM e passare i parametri facoltativamente.

Lavorare con le associazioni dei campi modulo

Di seguito è riportato l'elenco dei tipi di binding dei campi modulo forniti da KO.

Sr.No. Tipo di rilegatura e utilizzo
1 fare clic su: <funzione di rilegatura>

Questa associazione viene utilizzata per richiamare una funzione JavaScript associata a un elemento DOM in base a un clic.
2 evento: <evento-DOM: funzione-gestore>

Questa associazione viene utilizzata per ascoltare gli eventi DOM specificati e chiamare le funzioni del gestore associate in base a essi.
3 invia: <binding-function>

Questa associazione viene utilizzata per richiamare una funzione JavaScript quando viene inviato l'elemento DOM associato.
4 abilita: <binding-value>

Questa associazione viene utilizzata per abilitare determinati elementi DOM in base a una condizione specificata.
5 disabilita: <binding-value>

Questa associazione disabilita l'elemento DOM associato quando il parametro restituisce true.
6 valore: <binding-value>

Questa associazione viene utilizzata per collegare il valore del rispettivo elemento DOM nella proprietà ViewModel.
7 textInput: <binding-value>

Questa associazione viene utilizzata per creare un'associazione a 2 vie tra la casella di testo o l'area di testo e la proprietà ViewModel.
8 hasFocus: <binding-value>

Questa associazione viene utilizzata per impostare manualmente lo stato attivo di un elemento DOM HTML tramite una proprietà ViewModel.
9 controllato: <binding-value>

Questa associazione viene utilizzata per creare un collegamento tra un elemento del modulo verificabile e la proprietà ViewModel.
10 opzioni: <binding-array>

Questa associazione viene utilizzata per definire le opzioni per un elemento di selezione.
11 selectedOptions: <binding-array>

Questa associazione viene utilizzata per lavorare con gli elementi attualmente selezionati nel controllo del modulo di selezione di più elenchi.
12 uniqueName: <binding-value>

Questa associazione viene utilizzata per generare un nome univoco per un elemento DOM.