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에 할당 할 수 있습니다.
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow