knockout.js
foreach 바인딩 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에서 볼 수 있듯이 외부 노드 직원에 대한 정보를 보유하고 있으며 각 직원의 기술에 대해 알려주는 내부 노드가 있습니다.

그래서 여기서 우리는 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 구조의 외부 노드를 보유합니다. 내부 루프는 각 직원의 기술을 보유합니다. 각 루프 내부에서 해당 노드의 속성에 액세스 할 수 있습니다. 예를 들어 외부에서가 아니라 스킬 루프 내부에서 이름과 등급에 액세스 할 수 있습니다.

아래는 자바 스크립트 코드입니다.

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

폼의 자바 스크립트 뷰 포인트가 많지 않습니다. 우리는 직접 json을 Html에 사용될 observablearray에 할당 할 수 있습니다.