knockout.js
Praca z nokautem wiąże wiązania z JSON

Praca z zagnieżdżoną pętlą

Oto struktura JSON, której będziemy używać.

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

Ta struktura json może być przypisana do zmiennej lub może być odpowiedzią dowolnego interfejsu API.

Jak widzimy w tym JSON, istnieje zewnętrzny węzeł pracowników, który przechowuje informacje o nich, oraz wewnętrzny węzeł, który mówi o umiejętnościach każdego pracownika.

więc tutaj stworzymy zagnieżdżone dla każdego za pomocą nokautowego foreach. Oto 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>

Tutaj w powyższym html znajdują się dwie listy zawierające pętlę foreach. zewnętrzna pętla utrzyma zewnętrzny węzeł struktury json, czyli pracowników. Wewnętrzna pętla zawiera umiejętności każdego pracownika. Wewnątrz każdej pętli możemy uzyskać dostęp do właściwości odpowiedniego węzła. Na przykład możemy uzyskać dostęp do nazwy i oceny wewnątrz pętli umiejętności, a nie z zewnątrz.

Poniżej znajduje się kod javascript.

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

Z punktu widzenia javascript nie ma dużo kodu. możemy bezpośrednio przypisać naszego jsona do tablicy obserwowalnej, która będzie używana przez HTML.