knockout.js
Arbeiten mit Knockout für jede Bindung mit JSON

Mit verschachtelten Schleifen arbeiten

Hier ist die JSON-Struktur, die wir verwenden werden.

{
  "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
        }
      ]
    }
  ]
};

Diese Json-Struktur kann einer Variablen zugewiesen werden oder sie kann eine Antwort eines beliebigen APIs sein.

Wie wir in dieser JSON sehen können, gibt es einen äußeren Knoten-Mitarbeiter, der Informationen über sie enthält, und es gibt einen internen Knoten, der die Fähigkeiten jedes einzelnen Mitarbeiters beschreibt.

also hier werden wir für jeden einen verschachtelten Platz anlegen, der Knockout foreach verwendet. Hier ist die 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>

Hier in der obigen HTML-Datei gibt es zwei Listen, die eine foreach-Schleife enthalten. Die äußere Schleife wird den äußeren Knoten der Json-Struktur enthalten, die Mitarbeiter ist. Die innere Schleife enthält die Fähigkeiten jedes Mitarbeiters. Innerhalb jeder Schleife können wir auf die Eigenschaften des entsprechenden Knotens zugreifen. Zum Beispiel können wir auf den Namen und die Bewertung innerhalb der Skill-Schleife zugreifen, nicht von außen.

Unten ist der Javascript-Code.

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

Aus der Sicht von Javascript gibt es nicht viel Code. Wir können unseren Json direkt einem Beobachtungsbereich zuordnen, der von Html verwendet wird.