KnockoutJS - selectedOptions Binding

Essa ligação é usada para trabalhar com elementos que estão selecionados atualmente no controle de formulário de seleção de lista múltipla. Essa associação pode ser usada com associação de opção e controle de formulário <select> apenas.

Quando o usuário seleciona ou desmarca um item na lista de seleção múltipla, isso adiciona ou remove o valor correspondente a uma matriz no modelo de visualização. Se for uma matriz Observable, os itens selecionados ou desmarcados da IU também são atualizados na matriz em ViewModel, tornando-o um método de ligação bidirecional.

Sintaxe

selectedOptions: <binding-array>

Parâmetros

O parâmetro aqui será uma matriz (também pode ser um Observável). Os itens ativos do elemento selecionado são armazenados nesta matriz. Os itens anteriores serão substituídos.
Se o parâmetro for Matriz observável, os itens selecionados serão atualizados conforme e quando o observável subjacente for alterado. O elemento é processado apenas uma vez, se nenhuma matriz Observable for usada.

Exemplo

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso de selectedOptions Binding.

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

   <body>
      <p>Tutorials Library:<br><br>
      <select size = 10 multiple = 'true' data-bind = "
         options: availableTutorials,
         selectedOptions: selectedTutorials
      "></select></p>
         
      <p>(Press control and select for multiple options.)</p>
      <p>You have chosen below Tutorials:</p>
      <ul data-bind = "foreach: selectedTutorials">
         <li>
            <span data-bind = "text: $data"> </span>
         </li>
      </ul>

      <script type = "text/javascript">
         function ViewModel() {
            self = this;
            self.availableTutorials = ko.observableArray ([
               'Academic','Big Data','Databases',
               'Java Technologies','Mainframe',
               'Management','Microsoft Technologies',
               'Mobile Development','Programming','Software Quality'
            ]);

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

Resultado

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

Salve o código acima em selectedoptions-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
selectedTutorials é um array para armazenar as opções selecionadas.

↰ Previous page