foreach绑定
foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中
假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM-插入或去除相关项目或重新排序现有的DOM元素,不影响任何其他的DOM元素。
当然,也可以配合其他控制流一起适用,例如if和with。
示例1:遍历监控属性数组
本例适用foreach绑定,在一个table标签中循环显示监控属性数组的内容
示例2:添加或删除项目
UI源码:
视图模型源码:
self.people = ko.observableArray([
{ name: 'Bert' },{ name: 'Charles' },{ name: 'Denise' }
]);
self.addPerson = function() {
self.people.push({ name: "New at " + new Date() });
};
self.removePerson = function() {
self.people.remove(this);
}
}
ko.applyBindings(new Appviewmodel());
备注1:使用$data
如前两个示例中,foreach后面所跟的是要循环的监控属性数组名称,而foreach内部所跟随的是监控属性数组的项目,例如firstName和lastName。
当你想引用监控属性数组本身的时候,就可以使用这个特殊的上下文$data,他所指的就是监控属性数组本身。
备注4:不使用foreach容器并生产内容
在某些情况下,可能需要复制容器标签的内容,例如生成如下DOM:
像这种情况,我们就无法在ul标签中使用foreach绑定,解决这个问题的方法就是使用无容器的foreach绑定:
一些具体的细节
afterRender-当foreach第一次初始化执行的回调函数。KO提供下列参数回调:
插入的DOM元素的数组
数据项
afterAdd-当foreach添加新项目后的回调函数。KO提供下列参数回调:
beforeRemove-当一个数组项已被删除的回调函数。这里最明显的用jQuery的$(domNode).fadeOut()动画去除相应的DOM节点。KO提供下列参数回调:
删除一个DOM节点
被删除的数组元素的索引
删除的数组元素
beforeMove-当一个数组项在数组中已经改变了位置的回调函数,但之前相应的DOM节点已被移动。需要注意的是beforeMove适用于所有的数组元素的指标发生了变化,因此,如果你在一个数组的开头插入一个新的项目,然后回调(如果指定)将触发所有其他元素,因为它们的索引位置增加了一个。您可以使用beforeMove存储在受影响元素的原始屏幕坐标,这样你可以在afterMove回调动画动作。KO提供下列参数回调:
可能是移动的DOM节点
移动的数组元素的索引
移动的数组元素
afterMove-数组项在数组中已经改变位置的回调函数,KO提供下列参数回调:
可能已经移动的DOM节点
移动的数组元素的索引
移动的数组元素
以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之数据控制流foreach绑定。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。