第4章中的每个绑定的数据控制流 十、原料药

Foreach绑定

Foreach绑定主要用于循环显示和监控数组属性中的每一个元素，一般用于表标签中

假设您有一组监控属性。每当您添加、删除或重新排序数组项目时，绑定将有效地更新UI的DOM-插入或移除相关项目或重新排序现有的DOM元素，而不会影响任何其他DOM元素。

当然，它也可以用于其他控制流，例如if和with。

示例1:遍历监控属性数组

此示例适用于foreach绑定，并在循环中的表标记中显示监视属性数组的内容

tableheadthrthfirst name/thththlast name/th/tr/the dtbody data-bind=' foreach : people ' trtd data-bind=' text : first name '/tdtd data-bind=' text : last name '/TD/tr/t body/tablescript type=' text/JavaScript ' ko . applybindings({ people :[{ first name : ' Bert '，lastName: 'Bertington' }，/script示例2:添加或删除项目

用户界面源代码：

h4People/h4ul数据-bind=' foreach : people ' span数据-bind=' text : $ index '/span : span数据-bind=' text : name '/Spana href=' # '数据-bind=' click : $ parent . remove person ' remove/a/Li/ul button数据-bind=' click 3: addperson ' add/button view模型源代码：

函数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 . remove person=function(){ self . people . remove(this)；}}ko.applyBindings(新的AppViewModel())；注1:使用$数据

与前面两个示例一样，foreach后面是要循环的监控属性数组的名称，而foreach后面是监控属性数组的项目，如名字和姓氏。

当您想要引用监控属性数组本身时，可以使用这个特殊的上下文$data，它引用监控属性数组本身。

例如，监视属性数组中的项目没有显式的项目名称：

ul data-bind=' foreach : months '当前项目为： b data-bind=' text : $ data '/Li/ulscript type=' text/JavaScript ' ko . applybindings({ months :[' Jan '，' Feb '，' Mar '，' etc ']})；/script如果愿意，还可以使用$data来引用monitoring array属性中的项，例如：

TD data-bind=' text : $ data . first name '/TD，其实这是多余的。因为firstName的默认前缀是$data，所以一般不用写就可以省略。

注意2:使用$index、$parent和其他上下文标签

您可能会发现，在示例2中，使用了$index，而不是监控属性数组的索引值(从0开始)。当然，$index是一个监控属性，会根据数据的变化自动变化，就像例2所示。

并且$parent表示foreach绑定循环之外的绑定属性，例如：

h1 data-bind=' text : blogPostTitle '/H1ul data-bind=' foreach : likes ' libdata-bind=' text 3360 name '喜欢这篇博文b data-bind=' text 3360 $ parent . blog post title '/Li/ul注意3:使用“as”为foreach绑定项指定一个单独的名称

在注释1中，监控属性数组的项目是以$ data.varibale的方式访问的，但是有时您可能需要给这些项目单独命名，也就是说，您可以使用，例如：

ul data-bind=' foreach : { data : people，as:' person'}'/ul现在，只要在foreach循环中使用person，就可以访问数组中的元素。

还有一些嵌套使用的例子，它们会更复杂，例如：

ul数据-绑定=' foreach : { data : categories，as: 'category' }'liul数据-绑定='foreach: { data: items，as: ' item ' } ' lispan数据-绑定=' text : categories . name '/span : span数据-绑定=' text : items '/span/Li/ul/Li/ulscriptvar viewModel={ categoris 3333333ko . applybindings(viewModel)；/script注释4:不要使用foreach容器并生成内容

在某些情况下，可能需要复制容器标签的内容，例如，生成以下DOM:

ulli class='header '表头项目/li！-以下是从数组动态生成的-Li项目a/Li项目b/Li项目c/Li/ul这样，我们就不能在ul标签中使用foreach绑定。这个问题的解决方案是使用无容器foreach绑定：

ulli class='header '表头项目/li！-ko foreach : MyItems-LiItem span data-bind=' text : $ data '/span/Li！-/ko-/ulscript type=' text/JavaScript ' ko . applybindings({ myitems :[' A '，' B '，' C ']})；/script在这里，我们使用虚拟元素容器！- ko -还有！- /ko -.就像上一章提到的虚拟绑定一样。

注5:检测和处理阵列变化

当您修改模型数组的内容(通过添加、移动或删除其项目)时，foreach绑定中会使用有效的差分算法来计算发生了什么变化。

当您添加数组项时，foreach将创建一个新的模板副本，并将其插入到现有的DOM中。删除数组项时，foreach会直接删除对应的DOM元素。当您对数组项重新排序时(保持相同的对象实例)，foreach通常只需要将相应的DOM元素集成到它的新位置

注6:销毁物品

有时，您可能想要标记要删除的数据项，但实际上并没有删除它。这种方法称为非破坏性删除。

默认情况下，foreach绑定跳过(即隐藏)任何标记为删除的数组项。如果要显示这些项目，请使用includeDestroyed选项。例如，

Div数据-bind=' foreach : { data : my array，include destroyed 3360 true } './div注7:使用动画过渡来改善用户体验

如果需要对生成的DOM元素运行一些自定义逻辑，可以使用这些回调函数：after render/after add/before remove/before move/after move。

下面是一个使用afterAdd的简单示例，应用经典的“黄色淡出”效果来添加新项目。它需要jQuery插件的颜色来制作动画背景颜色。

源代码如下：

ul数据-绑定=' foreach : { data : myItems，afterAdd: yellowFadeIn } ' li数据-绑定='text: $data'/li/ulbutton数据-绑定=' click : addItem ' add/button script type=' text/JavaScript ' ko . applybindings({ myItems : ko . observablearray([' A '，' B '，' C' ])，yellowFadeIn: function(元素过滤器(' li ')。动画({ backgroundColor: '黄色' }，200)。动画({ backgroundColor: 'white' }，800)；}，addItem:函数(){ this . myitems . push(' New item ')；}});/编写一些具体细节

after render-foreach首次初始化执行的回调函数时。KO提供以下参数回调：

插入的DOM元素的数组

数据项目

after ADd-foreach添加新项后的回调函数。KO提供以下参数回调：

由DOM节点添加的数组元素的索引添加数组元素

BeforeRemove-删除数组项时的回调函数。在这里，移除相应DOM节点最明显的方法是使用jQuery的$(domNode)。fadeOut()动画。KO提供以下参数回调：

删除一个DOM节点

已删除数组元素的索引

已删除数组元素

before move——一个回调函数，当一个数组项已经改变了它在数组中的位置，但是对应的DOM节点之前已经被移动过。应该注意的是，应用于所有数组元素的beforeMove的索引已经改变。因此，如果您在数组的开头插入一个新项，那么回调(如果指定的话)将触发所有其他元素，因为它们的索引位置增加了一个。可以使用beforeMove存储受影响元素的原始屏幕坐标，这样就可以调用before move之后的动画动作。KO提供以下参数回调：

可能是一个移动的DOM节点

移动的数组元素的索引

移动的数组元素

AfterMove-一个回调函数，其中数组项已经改变了它在数组中的位置。KO提供以下参数回调：

可能已被移动的DOM节点

移动的数组元素的索引

移动的数组元素

以上是第三章第四章数据控制流的foreach绑定。边肖引进的原料药。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！