foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定。当我们呈现一组list数据,或者一个表格的时候,十分有用。
如果你绑定的数组是一个"监控数组" ,observable array,(和wpf里面的ObservableCollection
当然,foreach也支持嵌套绑定,或者和其他工作流绑定例如if 或者with。
Example 1: 迭代绑定一个数组
对数组中的每一个元素生成一行数据的只读表。
First name | Last name |
---|---|
"text: firstName"> | "text: lastName"> |
Example 2: 给例1中的制度表加上一个增加和移除方法
People
- "foreach: people">
- Name at position "text: $index"> : "text: name"> "#" data-bind="click: $parent.removePerson">Remove
要点1: 用 $data来指向数组的每一条数据
就像在上面的例子中展示的。foreach绑定能够指向数组每一条数据的属性。例如例1中的firstName 和lastName.但是,如果我们想指向数组本身,应该怎么办,此时我们可以用$.data.在foreach绑定中,$data指的就是数组的当前的元素项。
- "foreach: months">
- The current item is: "text: $data">
当然,如果你非要这样做的话, 你也可以给你指向的每一个属性加上一个 $data前缀
.例如,你也可以在例1中像下面这样写,虽然这样写没必要,因为它的默认上下文就是$data
:
"text: $data.firstName">
要点 2: 使用$index, $parent, 和其他的上下文属性
就像我们在例2 中看到的那样。你可一用$index 来表示数组中当前项从零开始的索引。 $index是一个监控属性,当数组的项变更的时候$index也会自动更新。
同样,你也可以用$parent来指向foreach外的数据。如果foreach对应的是viewmodel的直接子元素,那么$parent就是指的viewmodel,$root是对应根元素,多层循环嵌套的时候使用$root
"text: blogPostTitle">
- "foreach: likes">
- "text: name"> likes the blog post "text: $parent.blogPostTitle">
要点 3: 用as 给foreach项赋值一个别名
就想在要点1里面描述的那样。我们可以引用每一个数组项用 $data
上下文变量。但在一些特殊情况下,给当前项一个别名用起来更方便。尤其在多层嵌套结构中:
别名使用的语法如下:
- "foreach: { data: people, as: 'person' }">
现在在foreach循环的任何地方,绑定都可以根据person指向当前people的数组项。这种语法在多层foreach嵌套的场景中非常有用。例如:
- "foreach: { data: categories, as: 'category' }">
-
- "foreach: { data: items, as: 'item' }">
- "text: category.name">: "text: item">
注意: 记得通过as给别名 赋值的时候,传过去一个字符串'category'
, 不是as: category
), 因为我们是要给变量起一个别名,而不是传递一个标识符变量过去。
Note 4: 没有一个容器元素的时候使用foreach
在一些情况下,你想要通过foreach绑定一段标记语言html,但是没有供foreach绑定的元素。例如下面这张情景:
- class="header">Header item
- Item A
- Item B
- Item C
这种情况下没有任何元素可供foreach绑定。你不能放到ul里面,因为这时候会把header也放到复制的循环里面去。你也不能放其它的元素在ul里面,因为ul里面只允许放
要想处理这种情况。我们可以用无容器绑定语法。这中情况是依赖于html的注释标签。如下:
- class="header">Header item
- Item "text: $data">
和
注释作为标签的开始和结束,定义了一个虚元素来包含我们需要重复引用的标记语言在里面,knockout理解这种虚元素语法。我们可以就当真的有一个html元素来使用它。