KnockoutJS - Opções de ligação

Essa ligação é usada para definir as opções para um elemento selecionado. Isso pode ser usado para uma lista suspensa ou uma lista de seleção múltipla. Essa ligação não pode ser usada com nada além de elementos <select>.

Syntax

options: <binding-array>

Parameters

O parâmetro a ser passado aqui é uma matriz. Para cada entrada na matriz, a opção será adicionada para o respectivo nó de seleção. A opção anterior será removida.
Se o parâmetro for um valor observável, as opções disponíveis do elemento serão atualizadas conforme e quando o observável subjacente for alterado. O elemento é processado apenas uma vez, se nenhum observável for usado.
Parâmetros Adicionais
- optionsCaption - Este é apenas um valor fictício padrão, que se lê como 'Selecione o item abaixo' ou 'Escolha abaixo'.
- optionsText- Este parâmetro permite que você especifique qual propriedade do objeto você deseja definir como texto na lista suspensa. Este parâmetro também pode incluir uma função, que retorna a propriedade a ser usada.
- optionsValue- Semelhante a optionsText. Este parâmetro permite especificar qual propriedade do objeto pode ser usada para definir o atributo de valor dos elementos de opção.
- optionsIncludeDestroyed - Especifique este parâmetro se você deseja ver os itens da matriz que estão marcados como destruídos e não são realmente excluídos da matriz observável.
- optionsAfterRender - Use para executar alguma lógica personalizada nos elementos de opção existentes.
- selectedOptions - É usado para ler e gravar as opções selecionadas de uma lista de seleção múltipla.
- valueAllowUnset- Usando este parâmetro, é possível definir a propriedade do modelo com o valor que realmente não existe no elemento selecionado. Desta forma, pode-se manter a opção padrão em branco quando o menu suspenso de visualizações do usuário pela primeira vez.

Example

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso da vinculação de opções.

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

   <body>
      <p>Tutorials Library:
      <select data-bind = "
         options: availableTutorials,
         value: selectedTutorial,
         optionsCaption: 'Choose tutuorial...',
      "></select></p>
      
      <p>You have selected <b><span 
         data-bind = "text:selectedTutorial"></span></b></p>

      <script type = "text/javascript">
         function ViewModel() {
            this.selectedTutorial = ko.observable();
         
            this.availableTutorials = ko.observableArray ([
               'Academic','Big Data',
               'Databases','Java Technologies',
               'Mainframe','Management',
               'Microsoft Technologies','Mobile Development',
               'Programming','Software Quality'
            ]);
         };
         
         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 options-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
Observe que a associação de valor é usada para ler o item selecionado no momento no menu suspenso.

Observações

A seleção é preservada ao definir / alterar opções

KO deixará a seleção do usuário inalterada sempre que possível, enquanto a vinculação de opções atualiza o conjunto de opções em <select>elemento. Para uma única seleção na lista suspensa, o valor selecionado anteriormente ainda será preservado. Para a lista de seleção múltipla, todas as opções selecionadas anteriormente serão preservadas.

Pós-processamento das opções geradas

As opções geradas podem ser pós-processadas para alguma lógica personalizada adicional com a ajuda de optionsAfterRenderligue de volta. Esta função é executada após cada elemento ser inserido na lista, com os seguintes parâmetros -

O elemento de opção que é inserido.
O item de dados ao qual está vinculado; isso será indefinido para o elemento de legenda.

Example

Vamos dar uma olhada no exemplo a seguir, que usa optionsAfterRender para adicionar uma ligação de desativação para cada opção.

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

   <body>
      <select size = 3 data-bind = "
         options: myItems,
         optionsText: 'name',
         optionsValue: 'id',
         optionsAfterRender: setOptionDisable">
      </select>

      <script type = "text/javascript">
         function ViewModel() {
            myItems = [
               { name: 'First Class', id: 1, disable: ko.observable(false)},
               { name: 'Executive Class', id: 2, disable: ko.observable(true)},
               { name: 'Second Class', id: 3, disable: ko.observable(false)}
            ];
            
            setOptionDisable = function(option, item) {
               ko.applyBindingsToNode(option, {disable: item.disable}, item);
            }
         };
      
         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 options-bind-optionsafterrender.htm Arquivo.
Abra este arquivo HTML em um navegador.
A opção com id 2 é desabilitada usando o retorno de chamada optionsAfterRender.

↰ Previous page