KnockoutJS - Enlace comprobado

Este enlace se utiliza para crear un vínculo entre un elemento de formulario comprobable y la propiedad ViewModel. En su mayoría, estos elementos de formulario incluyen casillas de verificación y botones de opción. Este también es un método de enlace bidireccional en el que en el momento en que el usuario verifica el control del formulario, se cambia la propiedad ViewModel respectiva y viceversa.

Sintaxis

checked: <binding-value>

Parámetros

Parámetros principales

El estado del elemento comprobable se establece en el valor del parámetro. Anteriormente, se sobrescribirá el valor.
Checkbox- El elemento DOM se marca cuando el valor del parámetro ViewModel es verdadero y no se marca si es falso. Los números distintos de cero, las cadenas no vacías y los objetos no nulos se interpretan con un valor booleano verdadero, mientras que las cadenas no definidas, cero y vacías se consideran valores falsos.
Radio Buttons- Los botones de radio funcionan en forma de formato de cadena. Es decir, KnockoutJS establecerá el valor de los elementos solo cuando el valor del parámetro coincida exactamente con el valor del nodo Radio Button. La propiedad se establece con el nuevo valor en el momento en que el usuario selecciona un nuevo valor de botón de opción.
Si el parámetro es un observable, el valor de los elementos se marca o desmarca cuando se cambia el observable subyacente. El elemento se procesa solo una vez si no se utiliza ningún observable.

Parámetros adicionales

checkedValue- La opción checkValue se usa para contener el valor usado por el checkbinding en lugar del atributo value del elemento. Esto es muy útil cuando el valor verificado es algo diferente a una Cadena (como un Entero o un objeto).

Por ejemplo, eche un vistazo al siguiente fragmento de código donde el objeto del elemento en sí mismo se incluye en la matriz selectedValue, cuando las casillas de verificación respectivas están marcadas.

<!-- 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>

Si el parámetro checkValue es un valor observable, el enlace actualizará la propiedad del modelo verificado siempre que cambie el valor subyacente. Para los botones de opción, KO simplemente actualizará el valor del modelo. Para las casillas de verificación, reemplazará el valor anterior con el nuevo valor.

Ejemplo

Echemos un vistazo al siguiente ejemplo que demuestra el uso del control de casilla de verificación.

<!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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en checked-checkbox-bind.htm archivo.
Abra este archivo HTML en un navegador.
El botón Finalizar se activa solo cuando el usuario está de acuerdo con los términos y condiciones.

Ejemplo

Veamos el siguiente ejemplo que demuestra el uso del control de botón de radio:

<!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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en checked-radio-button-bind.htm archivo.
Abra este archivo HTML en un navegador.
El botón de opción contiene el valor del tipo de género.

↰ Previous page