<ul> <li>Header item</li> <!-- The following are generated dynamically from an array --> <li>Item A</li> <li>Item B</li> <li>Item C</li> </ul>
像这种情况，我们就无法在ul标签中使用foreach绑定，解决这个问题的方法就是使用无容器的foreach绑定：
<ul> <li>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>
这里使用虚拟元素容器，<!-- ko -->和<!-- /ko -->。就想之前章节提到的虚拟绑定一样。
备注5：检测并处理数组变化
当您修改模型数组的内容（通过添加，移动或删除其项），在foreach绑定使用一个有效的差分算法计算方法当出发生了什么变化的时候。
当您添加数组项，foreach会使您的模板的新副本，并将其插入到现有的DOM
当你删除数组项，foreach将直接删除相应的DOM元素
当你重新排序数组项（保持相同的对象实例），foreach通常只要将相应的DOM元素融入自己的新位置
备注6：销毁项目
有时你可能想为数据项目做删除标记，但实际上并不真正删除该项目。这中方式被称为非破坏性的删除。
默认情况下，foreach绑定将跳过（即隐藏）标记为删除任何数组项。如果你想显示这些项目，使用includeDestroyed选项。例如，
<div data-bind='foreach: { data: myArray, includeDestroyed: true }'> ... </div>
备注7：使用动画过渡，提高用户体验
如果您需要在生成的DOM元素运行一些定制逻辑，你可以使用afterRender/ afterAdd/beforeRemove/ beforeMove/ afterMove这些回调函数。
下面是一个使用afterAdd的一个简单的例子，应用经典的“黄色淡出”的效果，以新增项目。它需要的jQuery插件的颜色，使背景色彩的动画。
源码如下：
<ul data-bind="foreach: { data: myItems, afterAdd: yellowFadeIn }"> <li data-bind="text: $data"></li> </ul> <button data-bind="click: addItem">Add</button> <script type="text/javascript"> ko.applyBindings({ myItems: ko.observableArray([ 'A', 'B', 'C' ]), yellowFadeIn: function(element, index, data) { $(element).filter("li") .animate({ backgroundColor: 'yellow' }, 200) .animate({ backgroundColor: 'white' }, 800); }, addItem: function() { this.myItems.push('New item'); } }); </script>
一些具体的细节
afterRender-当foreach第一次初始化执行的回调函数。KO提供下列参数回调：
插入的DOM元素的数组
数据项
afterAdd-当foreach添加新项目后的回调函数。KO提供下列参数回调：
DOM节点
添加的数组元素的索引
添加的数组元素
beforeRemove-当一个数组项已被删除的回调函数。这里最明显的用jQuery的$(domNode).fadeOut()动画去除相应的DOM节点。KO提供下列参数回调：
删除一个DOM节点
被删除的数组元素的索引
删除的数组元素
beforeMove-当一个数组项在数组中已经改变了位置的回调函数，但之前相应的DOM节点已被移动。需要注意的是beforeMove适用于所有的数组元素的指标发生了变化，因此，如果你在一个数组的开头插入一个新的项目，然后回调（如果指定）将触发所有其他元素，因为它们的索引位置增加了一个。您可以使用beforeMove存储在受影响元素的原始屏幕坐标，这样你可以在afterMove回调动画动作。KO提供下列参数回调：
可能是移动的DOM节点
移动的数组元素的索引
移动的数组元素
afterMove-数组项在数组中已经改变位置的回调函数，KO提供下列参数回调：
可能已经移动的DOM节点
移动的数组元素的索引
移动的数组元素
以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之数据控制流foreach绑定，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: