KnockoutJS - Value Binding

Questa associazione viene utilizzata per collegare il valore del rispettivo elemento DOM nella proprietà ViewModel. Principalmente, viene utilizzato con elementi comeinput, select, e textarea. Questo è simile all'associazione di testo, con la differenza che i dati di associazione del valore possono essere modificati dall'utente e ViewModel lo aggiornerà automaticamente.

Syntax

value: <binding-value>

Parameters

  • La proprietà value dell'elemento HTML DOM è impostata sul valore del parametro. I valori precedenti verranno sovrascritti.

  • Se il parametro è un valore osservabile, il valore dell'elemento viene aggiornato man mano che l'osservabile sottostante viene modificato. L'elemento viene elaborato solo una volta se non viene utilizzato alcun osservabile.

  • valueUpdate è un parametro aggiuntivo che può essere fornito anche per funzionalità extra. KO utilizza eventi aggiuntivi per rilevare modifiche aggiuntive quando il parametro valueUpdate viene utilizzato nell'associazione. Di seguito sono riportati alcuni eventi comuni:

    • input - ViewModel viene aggiornato quando il valore dell'elemento di input cambia.

    • keyup - ViewModel viene aggiornato quando la chiave viene rilasciata dall'utente.

    • keypress - ViewModel viene aggiornato quando viene digitata la chiave.

    • afterkeydown - ViewModel continua ad aggiornarsi non appena l'utente inizia a digitare il carattere.

Example

Esaminiamo il seguente esempio che dimostra l'uso dell'associazione di valori.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Value Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Enter your name: 
         <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />
      </p>
      
      <p>Your name is : <span data-bind = "text: yourName"></span></p>

      <script type = "text/javascript">
         function ViewModel () {
            this.yourName = ko.observable('');
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

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

  • Salva il codice sopra in formato value-bind.htm file.

  • Apri questo file HTML in un browser.

  • I dati inseriti nella casella di testo vengono aggiornati immediatamente grazie all'utilizzo di valueUpdate.

Osservazioni

Ricezione di aggiornamenti di valore immediatamente dagli input

Se vuoi che l'elemento di input dia aggiornamenti immediati al tuo ViewModel, usa l'associazione textInput. È meglio delle opzioni valueUpdate, tenendo in considerazione lo strano comportamento dei browser.

Gestione dell'elenco a discesa (elementi <select>)

KO supporta l'elenco a discesa (elementi <select>) in un modo speciale. L'associazione di valori e l'associazione di opzioni lavorano insieme consentendo di leggere e scrivere valori, che sono oggetti JavaScript casuali e non solo valori String.

Utilizzo di valueAllowUnset con gli elementi <select>

Utilizzando questo parametro, è possibile impostare la proprietà del modello con un valore che effettivamente non esiste nell'elemento select. In questo modo è possibile mantenere l'opzione predefinita vuota quando l'utente visualizza il menu a discesa per la prima volta.

Example

Diamo un'occhiata al seguente esempio in cui viene utilizzata l'opzione valueAllowUnset.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Value Binding - working with drop-down lists</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Select a City:
         <select data-bind = " options: cities,
            optionsCaption: 'Choose City...',
            value: selectedCity,
            valueAllowUnset: true"></select>
      </p>

      <script type = "text/javascript">
         function ViewModel() {
            this.cities = ko.observableArray(['Washington D.C.', 'Boston', 'Baltimore']);
            selectedCity = ko.observable('Newark')
         };
         
         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

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

  • Salva il codice sopra in formato value-bind-drop-down.htm file.

  • Apri questo file HTML in un browser.

  • selectedCity viene assegnato con un valore che non è presente nell'elenco. Ciò rende il menu a discesa vuoto per la prima volta.

Aggiornamento dei valori delle proprietà osservabili e non osservabili

KO è in grado di creare un legame a due vie se usi il valore per collegare un elemento del form a una proprietà Observable, in modo che le modifiche tra di loro vengano scambiate tra di loro.

Se utilizzi una proprietà non osservabile (una semplice stringa o un'espressione JavaScript), KO farà quanto segue:

  • Se fai riferimento a una proprietà semplice su ViewModel, KO imposterà lo stato iniziale dell'elemento del modulo sul valore della proprietà. Se l'elemento del modulo viene modificato, KO riscriverà i nuovi valori nella proprietà ma non sarà in grado di rilevare alcun cambiamento nella proprietà, rendendolo così un legame unidirezionale.

  • Se fai riferimento a qualcosa che non è semplice, come il risultato di un confronto o una chiamata di funzione, KO imposterà lo stato iniziale dell'elemento del modulo su quel valore ma non potrà più scrivere le modifiche apportate all'elemento del modulo dall'utente. Possiamo chiamarlo come settatore di valori una tantum.

Example

Il seguente frammento di codice mostra l'uso di proprietà osservabili e non osservabili.

<!-- Two-way binding. Populates textbox; syncs both ways. -->
<p>First value: <input data-bind="value: firstVal" /></p>

<!-- One-way binding. Populates textbox; syncs only from textbox to model. -->
<p>Second value: <input data-bind="value: secondVal" /></p>

<!-- No binding. Populates textbox, but doesn't react to any changes. -->
<p>Third value: <input data-bind="value: secondVal.length > 8" /></p>

<script type = "text/javascript">
   function viewModel() {
      firstVal =  ko.observable("hi there"),     // Observable
      secondVal = "Wats up!!!"                   // Not observable
   };
</script>

Utilizzo dell'associazione di valori con l'associazione controllata

Se includi l'associazione del valore con l'associazione controllata, l'associazione del valore si comporterà come l'opzione CheckValue, che può essere utilizzata con l'associazione controllata. Controllerà il valore utilizzato per l'aggiornamento di ViewModel.