KnockoutJS - vinculação marcada

Essa ligação é usada para criar um link entre um elemento de formulário verificável e a propriedade ViewModel. Geralmente, esses elementos de formulário incluem caixa de seleção e botões de opção. Este também é um método de ligação bidirecional em que, no momento em que o usuário verifica o controle do formulário, a respectiva propriedade ViewModel é alterada e vice-versa.

Sintaxe

checked: <binding-value>

Parâmetros

Parâmetros Principais

O estado do elemento verificável é definido com o valor do parâmetro. Anteriormente, o valor será substituído.
Checkbox- O elemento DOM é verificado quando o valor do parâmetro ViewModel é verdadeiro e não é verificado se for falso. Números diferentes de zero, strings não vazias e objetos não nulos são interpretados com um valor booleano verdadeiro, enquanto strings indefinidas, zero e vazias são consideradas como valores falsos.
Radio Buttons- Os botões de opção funcionam na forma de um formato de string. Ou seja, KnockoutJS definirá o valor dos elementos apenas quando o valor do parâmetro corresponder exatamente ao valor do nó do botão de rádio. A propriedade é definida com o novo valor no momento em que o usuário seleciona um novo valor de botão de rádio.
Se o parâmetro for um observável, o valor dos elementos será verificado ou desmarcado à medida que o observável subjacente for alterado. O elemento é processado apenas uma vez se nenhum observável for usado.

Parâmetros Adicionais

checkedValue- A opção CheckedValue é usada para manter o valor usado pelo CHECKBinding em vez do atributo value do elemento. Isso é muito útil quando o valor verificado é algo diferente de uma String (como um Integer ou um objeto).

Por exemplo, dê uma olhada no seguinte fragmento de código, onde os próprios objetos do item são incluídos na matriz selectedValue, quando as respectivas caixas de seleção estão 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>

Se o parâmetro checkValue for um valor Observável, a vinculação atualizará a propriedade do modelo verificado sempre que o valor subjacente for alterado. Para botões de opção, KO apenas atualizará o valor do modelo. Para caixas de seleção, ele substituirá o valor antigo pelo novo valor.

Exemplo

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso do controle de caixa de seleção.

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

Resultado

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

Salve o código acima em checked-checkbox-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
O botão Concluir é ativado somente quando o usuário concorda com os termos e condições.

Exemplo

Vejamos o exemplo abaixo que demonstra o uso do controle de botão de opção -

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

Resultado

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

Salve o código acima em checked-radio-button-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
O botão de rádio contém o valor do tipo de gênero.

↰ Previous page