KnockoutJS - Foreach Binding

Nessa associação, cada item da matriz é referenciado na marcação HTML em um loop. Isso é muito útil ao preencher uma lista ou dados de tabela.foreach pode ser aninhado junto com outras ligações de fluxo de controle.

Sintaxe

foreach: <binding-array>

Parâmetros

O nome da matriz é passado como parâmetro. A marcação HTML é processada para cada item em um loop.
Um literal de objeto JavaScript pode ser passado como um parâmetro e pode ser iterado usando uma propriedade chamada dados.
Se o parâmetro for observável, todas as modificações feitas serão refletidas na IU assim que as alterações observáveis subjacentes.

Exemplo

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

<!DOCTYPE html>
   <head>
      <title>KnockoutJS foreach binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p>List of courses available:</p>
      <div data-bind = "foreach: courseArray ">
         <li data-bind = "text: $data"><span data-bind="text: $index"></span></li>
      </div>

      <script type="text/javascript">
         function AppViewModel() {
            this.courseArray = (['JavaScript','KnockoutJS','BackboneJS','EmberJS']);
            this.courseArray.push('HTML');
         };
         
         var vm = new AppViewModel();
         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 foreach-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.

Você pode reescrever o código acima usando aspalavra-chave. Basta alterar a linha de ligação conforme mostrado no código a seguir.

<div data-bind = "foreach: {data: courseArray, as :'cA' }">

Exemplo

Vamos dar uma olhada em outro exemplo para preencher os detalhes da lista usando o Observable Array.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS foreach binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p>List of product details:</p>
      <ul data-bind = "foreach: productArray ">
         <li>
            <span data-bind = "text: productName"></span>  
            <a href = "#" data-bind = "click: $parent.removeProduct">Remove </a>
         </li>
      </ul>

      <script type = "text/javascript">
         function AppViewModel() {
            self = this;
            self.productArray = ko.observableArray ([
               {productName: 'Milk'},
               {productName: 'Oil'},
               {productName: 'Shampoo'}
            ]);

            self.removeProduct = function() {
               self.productArray.remove(this);
            }
         };
         
         var vm = new AppViewModel();
         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 foreach-bind-using-observable.htm Arquivo.
Abra este arquivo HTML em um navegador.
O item da lista é removido dinamicamente quando você clica no link Remover.

Observações

Utilizando foreach sem container

Pode haver alguma situação em que não seja possível usar o contêiner para incluir foreach nele. Nessa situação, o formato sem contêiner pode ser usado para chamar a ligação.

<ul>
   <!-- ko foreach: productArray -->
   
   <li>
      <span data-bind="text: productName"></span>
      <a href="#" data-bind="click: $parent.removeProduct">Remove </a>
      <!-- /ko  -->
   </li>
   
</ul>

O <! - ko -> e <! - / ko -> funcionam como marcadores de início e fim, tornando-o uma sintaxe virtual e vincula os dados como se fossem um contêiner real.

Manipulação de itens destruídos na matriz

Os itens da matriz podem ser destruídos (ocultados no momento e removidos posteriormente) usando destroyfunção array fornecida por KO. Esses itens não são mostrados no foreach e são ocultados automaticamente. Para ver esses itens ocultos, KO fornece um método chamadoincludeDestroyed. Os itens ocultos são mostrados se este parâmetro for definido como Boolean true.

<div data-bind = "foreach: {data: courseArray, includeDestroyed: true  }">
   ...
   ...
   ...
</div>

↰ Previous page