KnockoutJS foreach绑定用来处理数组,通常用来将一个数组绑定到一个列表或者table中。在foreach绑定中,我们可以使用if、with等嵌套绑定。
示例代码:
<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>
绑定规则:
在ViewModel中,people是一个数组,foreach绑定将会遍历这个数组,将每一项生成一个tr,然后添加在tbody中。
binding context
在foreach中,我们可以使用绑定上下文,完整的绑定上下文包括:
- $data:当前项的数据
- $index:当前项的序号
- $parent:当前项的父级数据
要了解更多,请参考完整的数据上下文。
$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是一个json对象,可以这样使用:
<td data-bind="text: $data.firstName"></td>
$index和$parent示例:
<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>
使用别名 as
尽管可以方便的使用上下文数据,但有些时候给$data起一个更有意义的别名更容易理解,我们来看看as关键字的用法:
<ul data-bind="foreach: { data: people, as: 'person' }"></ul>
在这段代码中,people的每一个数据项被当作person来访问,其实person就是$data
下面是一个完整的例子:
<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>
不使用container
在前面的内容中我们介绍了使用虚拟节点来完成绑定,这种虚拟节点同样能够用在foreach绑定中,示例代码:
<ul> <li class="header">Header item</li> <!-- ko foreach: myItems --> <li>Item <span data-bind="text: $data"></span></li> <!-- /ko --> </ul> <script type="text/javascript"> ko.applyBindings({ myItems: ['A', 'B', 'C'] }); </script>
这种方法非常实用。