KnockoutJS - Habilitar enlace

Este enlace se usa para habilitar ciertos elementos DOM basados en una condición especificada. Esto es útil con elementos de formulario comoinput, selecty textarea.

Syntax

enable: <binding-value>

Parameters

El parámetro consta de un valor booleano que decide si el elemento debe habilitarse o no. El elemento está habilitado, si el parámetro es verdadero o verdadero como valor.
Los valores no booleanos se consideran valores vagamente booleanos. El significado 0 y nulo se consideran valores de tipo falso, y los objetos enteros y no nulos se consideran valores de tipo verdadero.
Si la condición en el parámetro contiene algún valor observable, entonces la condición se reevalúa siempre que cambie el valor observable. En consecuencia, el marcado relacionado se habilitará según el resultado de la condición.

Example

Echemos un vistazo al siguiente ejemplo que demuestra el uso de enable binding.

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

   <body>
      <p> Enter your feedback here:<br><br>
         <textarea rows = 5 data-bind = "value: hasFeedback, 
            valueUpdate: 'afterkeydown'" ></textarea>
      </p>
      
      <p><button data-bind = "enable: hasFeedback">Save Feedback</button></p>

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

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

Output

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

Guarde el código anterior en enable-bind.htm archivo.
Abra este archivo HTML en un navegador.
El botón Guardar está habilitado solo cuando el usuario ha ingresado un comentario.

Usar expresiones aleatorias para implementar habilitar el enlace

También puede usar una expresión aleatoria para decidir si el elemento debe habilitarse o no.

Example

Echemos un vistazo al siguiente ejemplo que demuestra el uso de una expresión aleatoria para invocar enable binding.

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

   <body>
      <p>Below button will be enabled only when product stock is available.</p>
      <button data-bind = "enable: productStock() > 0 ">
         Product Details
      </button>

      <script type = "text/javascript">
         function AppViewModel() {
            this.productStock = ko.observable(-10);
         };
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

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

Guarde el código anterior en enable-random-bind.htm archivo.
Abra este archivo HTML en un navegador.
El botón Detalles del producto está habilitado solo cuando el stock del producto está disponible.

↰ Previous page