KnockoutJS - Associazione Foreach

In questa associazione, ogni elemento della matrice viene referenziato nel markup HTML in un ciclo. Ciò è molto utile durante la compilazione di un elenco o di dati di una tabella.foreach può essere annidato insieme ad altre associazioni del flusso di controllo.

Sintassi

foreach: <binding-array>

Parametri

  • Il nome dell'array viene passato come parametro. Il markup HTML viene elaborato per ogni elemento in un ciclo.

  • Un valore letterale oggetto JavaScript può essere passato come parametro e può essere ripetuto utilizzando una proprietà chiamata data.

  • Se il parametro è osservabile, tutte le modifiche apportate vengono riflesse nell'interfaccia utente non appena le modifiche osservabili sottostanti.

Esempio

Diamo un'occhiata al seguente esempio, che dimostra l'uso dell'associazione 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice sopra in formato foreach-bind.htm file.

  • Apri questo file HTML in un browser.

Puoi riscrivere il codice sopra usando asparola chiave. Basta cambiare la riga di associazione come mostrato nel codice seguente.

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

Esempio

Diamo un'occhiata a un altro esempio per popolare i dettagli dell'elenco utilizzando 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice sopra in formato foreach-bind-using-observable.htm file.

  • Apri questo file HTML in un browser.

  • L'elemento dall'elenco viene rimosso dinamicamente quando si fa clic su Rimuovi collegamento.

Osservazioni

Utilizzando foreach senza contenitore

Potrebbe esserci qualche situazione in cui non è possibile utilizzare il contenitore per includere foreach in esso. In questa situazione, è possibile utilizzare il formato senza contenitore per richiamare l'associazione.

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

<! - ko -> e <! - / ko -> funzionano come marker di inizio e fine rendendola una sintassi virtuale e vincolano i dati come se fossero un vero contenitore.

Manipolazione di oggetti distrutti nell'array

Gli elementi della matrice possono essere distrutti (resi nascosti attualmente e rimossi in seguito) utilizzando destroyfunzione array fornita da KO. Questi elementi non vengono visualizzati in foreach e vengono nascosti automaticamente. Per vedere questi elementi nascosti, KO fornisce un metodo chiamatoincludeDestroyed. Gli elementi nascosti vengono visualizzati se questo parametro è impostato su Boolean true.

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