KnockoutJS - Reliure Foreach

Dans cette liaison, chaque élément de tableau est référencé dans le balisage HTML dans une boucle. Ceci est très utile lors du remplissage d'une liste ou de données de table.foreach peuvent être imbriquées avec d'autres liaisons de flux de contrôle.

Syntaxe

foreach: <binding-array>

Paramètres

  • Le nom du tableau est passé en paramètre. Le balisage HTML est traité pour chaque élément dans une boucle.

  • Un littéral d'objet JavaScript peut être passé en tant que paramètre et peut être itéré à l'aide d'une propriété appelée data.

  • Si le paramètre est observable, toutes les modifications apportées sont reflétées dans l'interface utilisateur dès que les modifications observables sous-jacentes.

Exemple

Jetons un œil à l'exemple suivant, qui illustre l'utilisation de foreach binding.

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

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans foreach-bind.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

Vous pouvez réécrire le code ci-dessus en utilisant asmot-clé. Modifiez simplement la ligne de liaison comme indiqué dans le code suivant.

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

Exemple

Jetons un coup d'œil à un autre exemple pour renseigner les détails de la liste à l'aide de 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>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans foreach-bind-using-observable.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • L'élément de la liste est supprimé de manière dynamique lorsque vous cliquez sur Supprimer le lien.

Observations

Utiliser foreach sans conteneur

Il peut y avoir une situation où il n'est pas possible d'utiliser le conteneur pour y inclure foreach. Dans ce cas, le format sans conteneur peut être utilisé pour appeler la liaison.

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

Les <! - ko -> et <! - / ko -> fonctionnent comme des marqueurs de début et de fin, ce qui en fait une syntaxe virtuelle et lie les données comme s'il s'agissait d'un vrai conteneur.

Manipuler les objets détruits dans le tableau

Les éléments du tableau peuvent être détruits (masqués actuellement et supprimés plus tard) en utilisant destroyfonction de tableau fournie par KO. Ces éléments ne sont pas affichés dans foreach et sont automatiquement masqués. Pour voir ces éléments cachés, KO fournit une méthode appeléeincludeDestroyed. Les éléments masqués sont affichés si ce paramètre est défini sur Boolean true.

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