使用嵌套循环
这是我们将要使用的 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。