knockout.js
Работа с нокаутом для привязки к JSON

Работа с вложенным циклом

Вот структура JSON, которую мы собираемся использовать.

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

Эта структура json может быть назначена переменной или может быть ответом любого api.

Как мы видим в этом JSON, есть сотрудники внешнего узла, которые содержат информацию о них, и есть внутренний узел, который рассказывает о каждом навыке сотрудника.

поэтому здесь мы собираемся создать вложенное для каждого из них использование нокаута foreach. Вот 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>

Здесь в приведенном выше html есть два списка, которые содержат цикл foreach. внешний цикл будет содержать внешний узел структуры json, который является сотрудниками. Внутренний цикл обладает навыками каждого сотрудника. Внутри каждого цикла мы можем получить доступ к свойствам соответствующего узла. Например, мы можем получить доступ к имени и рейтингу внутри цикла навыков не извне.

Ниже приведен код javascript.

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

Формируйте точку зрения javascript, там не так много кода. мы можем напрямую назначить наш json наблюдаемому символу, который будет использоваться Html.