KnockoutJS: abilita il binding

Questa associazione viene utilizzata per abilitare determinati elementi DOM in base a una condizione specificata. Ciò è utile con elementi del modulo comeinput, select, e textarea.

Syntax

enable: <binding-value>

Parameters

  • Il parametro è costituito da un valore booleano che decide se l'elemento deve essere abilitato o meno. L'elemento è abilitato, se il parametro è vero o vero come il valore.

  • I valori non booleani sono considerati valori booleani vagamente. Significato 0 e null sono considerati come valori falsi e gli oggetti Integer e non null sono considerati come valori true.

  • Se la condizione nel parametro contiene un valore osservabile, la condizione viene rivalutata ogni volta che il valore osservabile cambia. Di conseguenza, il markup correlato verrà abilitato in base al risultato della condizione.

Example

Diamo uno sguardo al seguente esempio che dimostra l'uso di 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

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

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

  • Apri questo file HTML in un browser.

  • Il pulsante salva è abilitato solo quando l'utente ha inserito un feedback.

Utilizzo di espressioni casuali per implementare l'associazione abilitata

Puoi anche usare un'espressione casuale per decidere se l'elemento deve essere abilitato o meno.

Example

Diamo uno sguardo al seguente esempio che dimostra l'uso di un'espressione casuale per invocare l'abilitazione dell'associazione.

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

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

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

  • Apri questo file HTML in un browser.

  • Il pulsante Dettagli prodotto è abilitato solo quando lo stock del prodotto è disponibile.