一、foreach binding
使用此功能可以方便我们循环遍历输出某个数组、集合中的内容。
(1)、循环遍历输出数组
| First name | Last name |
|---|---|
(2)、动态增加和删除遍历节点
People
(3)、如果我们想要输出数组中的所有元素而不是像例一中使用firstName去指定元素的话,我们可以使用$data来进行输出。比如:
当然,我们也可以使用$data来调用数组中具体的元素,比如我们要使用$data调用例1中的firstName的话,我们可以使用$data.firstName来输出firstName。
(4)、使用$index、$parent等其他的上下文属性
我们曾在例2中使用了$index来表示我们数组的下标,$index是Knockoutjs为我们提供的属性,我们可以直接引用,它会随着数组等下标的变化动态变化的,比如如果数组的长度减少了1,$index的值也会跟着减少的。
我们也可以使用$parent来使用foreach元素之外的属性,比如:
这里使用$parent来调用foreach循环体之外的blogPostTitle属性。
(5)、使用"as"为foreach中的元素定义别名
我们可以使用$data来代替数组中的元素,同时我们也可以使用as来为我们要遍历的元素起一个别名。
在使用的时候我们要注意,起别名使用的是as:'category'而不是as:category。
(6)、在没有绑定属性的情况下使用foreach
有的时候我们想要循环输出一些特殊的内容,比如我们想要输入下面文本中的
如果我们想要循环输出上面代码中的
我们使用来表示循环的开始和结束,这是一个虚拟的标签,Knockoutjs能够对其中的foreach进行绑定就好像你将foreach绑定到了一个真实的标签上一样。
(7)、默认不显示被标示为删除的元素
有的时候我们要跳过数组中的一些元素,此时这些元素已经被标示为删除,但并没有被真实删除,这些元素当我们使用foreach输出的时候是默认不显示的,如果我们想要这些元素显示的话,我们可以使用includeDestroyed这个选项,比如:
...
二、if binding 和 if not binding
(1)、使用if binding可以控制某个组件动态显示,类似我们之前接触到的visible属性,不过此属性绑定过以后就不能更改,而if binding可以根据相应的条件控制组件是否显示,下面是一个简单的例子:
Here is a message. Astonishing.
此例根据checkbox是否勾选来控制是否显示下面的一个
此例中如果capital为null,则不会进行显示。此时,如果没有if进行判断的话,则在使用capital.cityName时就会出错。
(2)、if not binding的使用方法和if binding的使用方法一样,这里就不作介绍了。
三、with binding
我们可以使用with binding来重新定义一个上下文绑定,比如:
with: coords
"> Latitude: , Longitude:
这样我们在使用coords下的latitude和longitude的时候我们就不需要使用coords.latitude来调用了,因为我们使用with:coords来指定了coords的上下文,当我们使用coords下面的属性时就可以直接使用了。
下面提供一个动态交互的例子: