KnockoutJS - Ativar vinculação

Essa ligação é usada para habilitar certos elementos DOM com base na condição especificada. Isso é útil com elementos de formulário, comoinput, select, e textarea.

Syntax

enable: <binding-value>

Parameters

O parâmetro consiste em um valor semelhante ao booleano que decide se o elemento deve ser habilitado ou não. O elemento é habilitado, se o parâmetro for verdadeiro ou verdadeiro como o valor.
Os valores não booleanos são considerados valores vagamente booleanos. O que significa que 0 e nulo são considerados valores semelhantes a falsos, e objetos inteiros e não nulos são considerados valores semelhantes a verdadeiros.
Se a condição no parâmetro contém qualquer valor observável, então a condição é reavaliada sempre que o valor observável muda. Da mesma forma, a marcação relacionada será habilitada com base no resultado da condição.

Example

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso de ativação de vinculação.

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

Vamos realizar as etapas a seguir para ver como o código acima funciona -

Salve o código acima em enable-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
O botão Salvar é habilitado apenas quando o usuário insere um feedback.

Usando expressões aleatórias para implementar habilitar ligação

Você também pode usar uma expressão aleatória para decidir se o elemento deve ser ativado ou não.

Example

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso de expressão aleatória para invocar a ligação de ativação.

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

Vamos realizar as etapas a seguir para ver como o código acima funciona -

Salve o código acima em enable-random-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
O botão Detalhes do produto é habilitado apenas quando o estoque do produto está disponível.

↰ Previous page