knockout.js
Travailler avec knockout foreach liaison avec JSON

Travailler avec des boucles imbriquées

Voici la structure JSON que nous allons utiliser.

{
  "employees": [
    {
      "firstName": "John",
      "lastName": "Doe",
      "skills": [
        {
          "name": "javascript",
          "rating": 5
        }
      ]
    },
    {
      "firstName": "Anna",
      "lastName": "Smith",
      "skills": [
        {
          "name": "css",
          "rating": 5
        },
        {
          "name": "javascript",
          "rating": 5
        }
      ]
    },
    {
      "firstName": "Peter",
      "lastName": "Jones",
      "skills": [
        {
          "name": "html",
          "rating": 5
        },
        {
          "name": "javascript",
          "rating": 3
        }
      ]
    }
  ]
};

Cette structure json peut être assignée à une variable ou peut être une réponse de n'importe quelle api.

Comme nous pouvons le voir dans ce JSON, il existe un nœud externe qui contient des informations à leur sujet, et il existe un nœud interne qui raconte les compétences de chaque employé.

Nous allons donc créer un imbriqué pour chaque utilisation à l'aide de KO. Voici le html

<ul id="employee" data-bind="foreach: employee">
   <li data-bind="text:firstName + ' ' + lastName">
   </li>
   <ul data-bind="foreach : skills">
        <li data-bind="text: name">
        </li>
      <ul>
        <li>
          Rating : <!-- ko text: rating --><!-- /ko -->
        </li>
      </ul>
   </ul>
</ul>

Ici, dans le HTML ci-dessus, il y a deux listes qui contiennent la boucle foreach. la boucle externe contiendra le nœud externe de la structure json qui est des employés. Boucle intérieure détient les compétences de chaque employé. Dans chaque boucle, nous pouvons accéder aux propriétés du noeud correspondant. Par exemple, nous pouvons accéder au nom et à la notation à l'intérieur de la boucle de compétences, et non de l'extérieur.

Ci-dessous le code javascript.

var employeeViewModel = function(){
  var self = this;
  self.employee = ko.observableArray(employees);//here we can assign json
}
var viewModel = new employeeViewModel();
ko.applyBindings(viewModel);

Formez le point de vue javascript, il n'y a pas beaucoup de code. nous pouvons directement attribuer notre json à un tableau d'observation qui sera utilisé par HTML.