foreach绑定主要用于循环展示监控数组属性中的每一个元素，一般用于table标签中
假设你有一个监控属性数组，每当您添加，删除或重新排序数组项时，绑定将有效地更新UI的DOM-插入或去除相关项目或重新排序现有的DOM元素，不影响任何其他的DOM元素。
当然，也可以配合其他控制流一起适用，例如if和with。
示例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：添加或删除项目
UI源码：
<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());
备注1：使用$data
如前两个示例中，foreach后面所跟的是要循环的监控属性数组名称，而foreach内部所跟随的是监控属性数组的项目，例如firstName和lastName。
当你想引用监控属性数组本身的时候，就可以使用这个特殊的上下文$data，他所指的就是监控属性数组本身。
例如，你的监控属性数组中的项目没有明确的项目名称：
<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来引用监控数组属性中的项目，例如：
<td data-bind="text: $data.firstName"></td>
其实这是多此一举的。因为firstName的默认前缀就是$data，所以一般可以省略不写。
备注2：使用$index、$parent和其他的上下文标记
你可能会发现，在示例2中使用了$index来代替了监控属性数组的索引值(从0开始)，当然$index是一个监控属性，他会根据数据的变化而自动变化，就像示例2中展示的一样。
而$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>
备注3：使用“as”给foreach绑定项目起个别名
在备注1中，使用$data.varibale的方式访问的监控属性数组的项目，但在有些时候你可以需要给这些项目起个别名，那就是可以使用as，例如：
<ul data-bind="foreach: { data: people, as: 'person' }"></ul>
现在，只要在foreach循环中，使用person，就可以访问数组中的元素了。
也有些嵌套使用的例子，这中会更加复杂一些，例如：
<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>
备注4：不使用foreach容器并生产内容
在某些情况下，可能需要复制容器标签的内容，例如生成如下DOM：