KnockoutJS 3.X API 第四章之数据控制流foreach绑定


Posted in Javascript onOctober 10, 2016

foreach绑定

foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中

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

当然,也可以配合其他控制流一起适用,例如if和with。

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

本例适用foreach绑定,在一个table标签中循环显示监控属性数组的内容

<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
</script>

示例2:添加或删除项目

KnockoutJS 3.X API 第四章之数据控制流foreach绑定

UI源码:

<h4>People</h4>
<ul data-bind="foreach: people">
<li>
Name at position <span data-bind="text: $index"> </span>:
<span data-bind="text: name"> </span>
<a href="#" data-bind="click: $parent.removePerson">Remove</a>
</li>
</ul>
<button data-bind="click: addPerson">Add</button>

视图模型源码:

function 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.removePerson = function() {
self.people.remove(this);
}
}
ko.applyBindings(new AppViewModel());

备注1:使用$data

如前两个示例中,foreach后面所跟的是要循环的监控属性数组名称,而foreach内部所跟随的是监控属性数组的项目,例如firstName和lastName。

当你想引用监控属性数组本身的时候,就可以使用这个特殊的上下文$data,他所指的就是监控属性数组本身。

例如,你的监控属性数组中的项目没有明确的项目名称:

<ul data-bind="foreach: months">
<li>
The current item is: <b data-bind="text: $data"></b>
</li>
</ul>
<script type="text/javascript">
ko.applyBindings({
months: [ 'Jan', 'Feb', 'Mar', 'etc' ]
});
</script>

如何你愿意的话,也可以使用$data来引用监控数组属性中的项目,例如:

<td data-bind="text: $data.firstName"></td>

其实这是多此一举的。因为firstName的默认前缀就是$data,所以一般可以省略不写。

备注2:使用$index、$parent和其他的上下文标记

你可能会发现,在示例2中使用了$index来代替了监控属性数组的索引值(从0开始),当然$index是一个监控属性,他会根据数据的变化而自动变化,就像示例2中展示的一样。

而$parent所代表的是在foreach绑定循环外的某个绑定属性,例如:

<h1 data-bind="text: blogPostTitle"></h1>
<ul data-bind="foreach: likes">
<li>
<b data-bind="text: name"></b> likes the blog post <b data-bind="text: $parent.blogPostTitle"></b>
</li>
</ul>

备注3:使用“as”给foreach绑定项目起个别名

在备注1中,使用$data.varibale的方式访问的监控属性数组的项目,但在有些时候你可以需要给这些项目起个别名,那就是可以使用as,例如:

<ul data-bind="foreach: { data: people, as: 'person' }"></ul>

现在,只要在foreach循环中,使用person,就可以访问数组中的元素了。

也有些嵌套使用的例子,这中会更加复杂一些,例如:

<ul data-bind="foreach: { data: categories, as: 'category' }">
<li>
<ul data-bind="foreach: { data: items, as: 'item' }">
<li>
<span data-bind="text: category.name"></span>:
<span data-bind="text: item"></span>
</li>
</ul>
</li>
</ul>
<script>
var viewModel = {
categories: ko.observableArray([
{ name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] },
{ name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] }
])
};
ko.applyBindings(viewModel);
</script>

备注4:不使用foreach容器并生产内容

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

<ul>
<li class="header">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 class="header">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插件的颜色,使背景色彩的动画。

KnockoutJS 3.X API 第四章之数据控制流foreach绑定

源码如下:

<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绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript生成随机大小写字母的方法
Feb 20 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
JS定义类的六种方式详解
May 12 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 #Javascript
JS命令模式例子之菜单程序
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 #Javascript
You might like
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
js仿微信抢红包功能
2020/09/25 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
详解python进行mp3格式判断
2016/12/23 Python
Python查看微信撤回消息代码
2018/06/07 Python
python调用staf自动化框架的方法
2018/12/26 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
python编写简单端口扫描器
2019/09/04 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
python re.match()用法相关示例
2021/01/27 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
学生个人自我鉴定范文
2014/03/28 职场文书
租房协议书怎么写
2014/04/10 职场文书
大学课外活动总结
2014/07/09 职场文书
考试作弊检讨书
2014/10/21 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书