knockout.js
Werken met knock-out voor elke binding met JSON

Werken met geneste looping

Hier is de JSON-structuur die we gaan gebruiken.

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

Deze json-structuur kan worden toegewezen aan een variabele of het kan een reactie zijn van een willekeurige API.

Zoals we in deze JSON kunnen zien, is er een externe node-medewerker die informatie over hen bevat, en er is een interne node die over de vaardigheden van elke medewerker vertelt.

dus hier gaan we een genest maken voor elk gebruik van knock-out foreach. Hier is de 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 de bovenstaande HTML zijn er twee lijst die elke lus bevatten. buitenste lus bevat de buitenste knoop van de json-structuur die werknemers is. Binnenste lus bevat de vaardigheden van elke werknemer. Binnen elke lus hebben we toegang tot de eigenschappen van de overeenkomstige knoop. Voor een voorbeeld hebben we toegang tot de naam en waardering binnen de vaardighedenlus, niet van buitenaf.

Hieronder staat de 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);

Vanuit het oogpunt van JavaScript is er niet veel code. we kunnen onze json rechtstreeks toewijzen aan een waarneembare array die door Html zal worden gebruikt.