foreach绑定

时间:2022-03-28 10:43:14

目的

foreach可以将一个数组中的实体循环的进行绑定。这在将一个list显示成table时非常有用。

假设数组是observable的,当在绑定后做了add, remove,或者重新排序后,绑定会找到相应的元素做新增、删除或者排序,而不会影响其他不相关的DOM元素。这比重新生成整个foreach的输出要高效的多。

当然,你也可以任意的使用其他控制语句如if和with来嵌套foreach绑定。

例1:遍历数组

示例使用foreach循环一个数组实体展示成一个只读的table

<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table> <script type="text/javascript">
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
</script>

例2:使用新增、删除功能

如果数组是observable的,界面会和数组保持同步的。

运行效果:http://knockoutjs.com/documentation/foreach-binding.html  Example 2:Live example with add/remove

<h4>People</h4>
<ul data-bind="foreach: people">
<li>
Name at position <span data-bind="text: $index"> </span>:
<span data-bind="text: name"> </span>
<a href="#" data-bind="click: $parent.removePerson">Remove</a>
</li>
</ul>
<button data-bind="click: addPerson">Add</button>
function AppViewModel() {
var self = this; self.people = ko.observableArray([
{ name: 'Bert' },
{ name: 'Charles' },
{ name: 'Denise' }
]); self.addPerson = function() {
self.people.push({ name: "New at " + new Date() });
}; self.removePerson = function() {
self.people.remove(this);
}
} ko.applyBindings(new AppViewModel());

参数

传递你想遍历的数组,绑定会循环每一个实体进行输出。

另外,也可以传递一个叫做data的属性的名称,只要它是一个要遍历的数组。这个对象还可能有其他属性,如afterAdd或includeDestroyed -- 参见下面的说明及例子。

如果传递的数组是observable的,通过foreach绑定的元素会在数组改变后做相应的更新。

注1:使用$data指向数组每一项

像上面的例子中说明的那样,使用foreach绑定可以指向一个数组项的每一个属性。如上面的”例1“指向的是firstName和lastName属性。

如果你不想引用属性,而是要使用数组本身,要怎么办?你可以使用特殊的上下文属性$data。在foreach中,它的意思是”当前项“。例如:

<ul data-bind="foreach: months">
<li>
The current item is: <b data-bind="text: $data"></b>
</li>
</ul> <script type="text/javascript">
ko.applyBindings({
months: [ 'Jan', 'Feb', 'Mar', 'etc' ]
});
</script>

如果你原因,也可以使用$data做为属性的前缀,如例1可以这样写:

<td data-bind="text: $data.firstName"></td>

但这不是必须的,因为firstName会默认使用$data的。

注2:使用$index, $parent,和其他上下文属性

和你在例2中看到的一样,也可以使用$index,它表示一个从0开始的当前数组索引。$index是observable的,并且当item的index改变时会做更新(如:做了新增、删除项)。

相似的,也可以使用$parent来指向foreach引用数组所在的上一级对象,例如:

<h1 data-bind="text: blogPostTitle"></h1>
<ul data-bind="foreach: likes">
<li>
<b data-bind="text: name"></b> likes the blog post <b data-bind="text: $parent.blogPostTitle"></b>
</li>
</ul>

更多信息请参见binding context properties.

注3:使用“as”给foreach项别名

如注1中,可以使用$data来遍历数组。在某些情况下,给当前项一个别名是非常有用的,如:

<ul data-bind="foreach: { data: people, as: 'person' }"></ul>

现在,在foreach内,都可以使用person来访问当前数组项,它就是people数组。这在使用嵌套的foreach时非常有用,如:

<ul data-bind="foreach: { data: categories, as: 'category' }">
<li>
<ul data-bind="foreach: { data: items, as: 'item' }">
<li>
<span data-bind="text: category.name"></span>:
<span data-bind="text: item"></span>
</li>
</ul>
</li>
</ul> <script>
var viewModel = {
categories: ko.observableArray([
{ name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] },
{ name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] }
])
};
ko.applyBindings(viewModel);
</script>

提示:as后面传递的是一个字符串类型,因为你是要重命名一个变量。