KnockoutJS - Enlace Foreach

En este enlace, se hace referencia a cada elemento de la matriz en el marcado HTML en un bucle. Esto es muy útil al completar una lista o datos de tabla.foreach se puede anidar junto con otros enlaces de flujo de control.

Sintaxis

foreach: <binding-array>

Parámetros

El nombre de la matriz se pasa como parámetro. El marcado HTML se procesa para cada elemento en un bucle.
Un objeto literal de JavaScript se puede pasar como parámetro y se puede iterar utilizando una propiedad llamada datos.
Si el parámetro es observable, las modificaciones realizadas se reflejan en la interfaz de usuario tan pronto como los cambios observables subyacentes.

Ejemplo

Echemos un vistazo al siguiente ejemplo, que demuestra el uso de la vinculación 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en foreach-bind.htm archivo.
Abra este archivo HTML en un navegador.

Puede reescribir el código anterior usando aspalabra clave. Simplemente cambie la línea de enlace como se muestra en el siguiente código.

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

Ejemplo

Echemos un vistazo a otro ejemplo para rellenar los detalles de la lista utilizando la matriz observable.

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

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en foreach-bind-using-observable.htm archivo.
Abra este archivo HTML en un navegador.
El elemento de la lista se elimina dinámicamente al hacer clic en Eliminar enlace.

Observaciones

Utilizando foreach sin contenedor

Puede haber alguna situación en la que no sea posible usar el contenedor para incluir foreach en él. En esa situación, el formato sin contenedor se puede utilizar para invocar el enlace.

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

<! - ko -> y <! - / ko -> funcionan como marcadores de inicio y fin, lo que lo convierte en una sintaxis virtual y enlaza datos como si fuera un contenedor real.

Manejo de elementos destruidos en matriz

Los elementos de la matriz pueden destruirse (ocultarse actualmente y eliminarse más tarde) usando destroyfunción de matriz proporcionada por KO. Estos elementos no se muestran en foreach y se ocultan automáticamente. Para ver estos elementos ocultos, KO proporciona un método llamadoincludeDestroyed. Los elementos ocultos se muestran si este parámetro se establece en booleano verdadero.

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

↰ Previous page