使用嵌套循环

这是我们将要使用的 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 中看到的那样,有一个外部节点员工持有关于它们的信息,并且有一个内部节点讲述每个员工的技能。

所以在这里我们将为每个使用 knockout 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 使用的 observablearray。