knockout.js
Arbetar med knockout för varje bindning med JSON

Arbetar med kapslade slingor

Här är JSON-strukturen vi ska använda.

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

Denna json-struktur kan tilldelas en variabel eller den kan vara ett svar från vilken api som helst.

Som vi ser i denna JSON finns det en anställd med en yttre nod som innehåller information om dem, och det finns en intern nod som berättar om varje anställdas färdigheter.

så här kommer vi att skapa en kapslad för varje som använder knockout-förhand. Här är 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>

Här i ovanstående html finns det två listor som håller förhandslingan. ytterslinga kommer att hålla den yttre noden i jsonstrukturen som är anställda. Inre slinga har varje medarbetares färdigheter. Inuti varje slinga får vi åtkomst till egenskaperna för motsvarande nod. För ett exempel kan vi få tillgång till namn och klassificering inuti skicklighetsslingan inte utanför.

Nedan är javascript-koden.

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

Forma javascript synvinkel finns det inte mycket kod. Vi kan direkt tilldela vår json till en observablearray som kommer att användas av Html.