使用巢狀迴圈

這是我們將要使用的 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。