KnockoutJS - verificato Binding

Questa associazione viene utilizzata per creare un collegamento tra un elemento del modulo verificabile e la proprietà ViewModel. Per lo più questi elementi del modulo includono casella di controllo e pulsanti di opzione. Questo è anche un metodo di associazione a due vie in cui nel momento in cui l'utente controlla il controllo del modulo, la rispettiva proprietà ViewModel viene modificata e viceversa.

Sintassi

checked: <binding-value>

Parametri

Parametri principali

  • Lo stato dell'elemento verificabile è impostato sul valore del parametro. In precedenza il valore verrà sovrascritto.

  • Checkbox- L'elemento DOM viene verificato quando il valore del parametro ViewModel è true e viene deselezionato se è falso. I numeri diversi da zero, le stringhe non vuote e gli oggetti non nulli vengono interpretati con un valore booleano vero, mentre le stringhe non definite, zero e vuote sono considerate valore falso.

  • Radio Buttons- I pulsanti di opzione funzionano in una forma di formato String. Ciò significa che KnockoutJS imposterà il valore degli elementi solo quando il valore del parametro corrisponde esattamente al valore del nodo del pulsante radio. La proprietà viene impostata con il nuovo valore nel momento in cui l'utente seleziona un nuovo valore del pulsante di opzione.

  • Se il parametro è un osservabile, il valore degli elementi viene selezionato o deselezionato ogni volta che viene modificato l'osservabile sottostante. L'elemento viene elaborato solo una volta se non viene utilizzato alcun osservabile.

Parametri aggiuntivi

  • checkedValue- L'opzioneCheckValue viene utilizzata per contenere il valore utilizzato da Checkbinding invece dell'attributo value dell'elemento. Ciò è molto utile quando il valore selezionato è qualcosa di diverso da una stringa (come un intero o un oggetto).

Ad esempio, dai un'occhiata al seguente frammento di codice in cui gli oggetti item stessi sono inclusi nell'array selectedValue, quando le rispettive caselle di controllo sono selezionate.

<!-- ko foreach: items -->
   <input type = "checkbox" data-bind = "checkedValue: $data, 
      checked: $root.chosenValue" />
   <span data-bind = "text: itemName"></span>
<!-- /ko -->

<script type = "text/javascript">
   var viewModel = {
      
      itemsToBeSeen: ko.observableArray ([
         { itemName: 'Item Number One' },
         { itemName: 'Item Number Two' }
      ]),
      
      chosenValue: ko.observableArray()
   };
</script>

Se il parametro checksValue è un valore Observable, l'associazione aggiornerà la proprietà del modello verificato ogni volta che il valore sottostante cambia. Per i pulsanti di opzione, KO aggiornerà semplicemente il valore del modello. Per le caselle di controllo, sostituirà il vecchio valore con il nuovo valore.

Esempio

Diamo un'occhiata al seguente esempio che dimostra l'uso del controllo della casella di controllo.

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

   <body>
      <p> The required files are installed. 
      Please check below to complete installation</p>
      
      <p><input type = "checkbox" data-bind = "checked: agreeFlag" />
      I agree to all terms and conditions applied.</p>
      
      <button data-bind = "enable: agreeFlag">Finish</button>

      <script type = "text/javascript">
         function ViewModel() {
            this.agreeFlag =  ko.observable(false)       // Initially unchecked
         };

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

Produzione

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

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

  • Apri questo file HTML in un browser.

  • Il pulsante Fine viene attivato solo quando l'utente accetta i termini e le condizioni.

Esempio

Vediamo sotto l'esempio che dimostra l'uso del controllo del pulsante di opzione -

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

   <body>
      <p> Select gender type from below:</p>
      <div><input type = "radio" name = "gender" value = "Male" 
         data-bind = "checked: checkGender" /> Male</div>
         
      <div><input type = "radio" name = "gender" value = "Female" 
         data-bind = "checked: checkGender" /> Female</div>
         
      <div><p>You have selected: <span 
         data-bind = "text:checkGender "></span></p></div>

      <script type = "text/javascript">
         function ViewModel () {
            checkGender =  ko.observable("Male")     // Initially male is selected
         };

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

Produzione

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

  • Salva il codice sopra in formato checked-radio-button-bind.htm file.

  • Apri questo file HTML in un browser.

  • Il pulsante di opzione contiene il valore del tipo di sesso.