foreach绑定
目的
foreach可以将一个数组中的实体循环的进行绑定。这在将一个list显示成table时非常有用。
假设数组是observable的,当在绑定后做了add, remove,或者重新排序后,绑定会找到相应的元素做新增、删除或者排序,而不会影响其他不相关的DOM元素。这比重新生成整个foreach的输出要高效的多。
当然,你也可以任意的使用其他控制语句如if和with来嵌套foreach绑定。
例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:使用新增、删除功能
如果数组是observable的,界面会和数组保持同步的。
运行效果:http://knockoutjs.com/documentation/foreach-binding.html Example 2:Live example with add/remove
<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());
参数
传递你想遍历的数组,绑定会循环每一个实体进行输出。
另外,也可以传递一个叫做data的属性的名称,只要它是一个要遍历的数组。这个对象还可能有其他属性,如afterAdd或includeDestroyed -- 参见下面的说明及例子。
如果传递的数组是observable的,通过foreach绑定的元素会在数组改变后做相应的更新。
注1:使用$data指向数组每一项
像上面的例子中说明的那样,使用foreach绑定可以指向一个数组项的每一个属性。如上面的”例1“指向的是firstName和lastName属性。
如果你不想引用属性,而是要使用数组本身,要怎么办?你可以使用特殊的上下文属性$data。在foreach中,它的意思是”当前项“。例如:
<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做为属性的前缀,如例1可以这样写:
<td data-bind="text: $data.firstName"></td>
但这不是必须的,因为firstName会默认使用$data的。
注2:使用$index, $parent,和其他上下文属性
和你在例2中看到的一样,也可以使用$index,它表示一个从0开始的当前数组索引。$index是observable的,并且当item的index改变时会做更新(如:做了新增、删除项)。
相似的,也可以使用$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>
更多信息请参见binding context properties.
注3:使用“as”给foreach项别名
如注1中,可以使用$data来遍历数组。在某些情况下,给当前项一个别名是非常有用的,如:
<ul data-bind="foreach: { data: people, as: 'person' }"></ul>
现在,在foreach内,都可以使用person来访问当前数组项,它就是people数组。这在使用嵌套的foreach时非常有用,如:
<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>
提示:as后面传递的是一个字符串类型,因为你是要重命名一个变量。
foreach绑定的更多相关文章
- KnockoutJS 3.X API 第四章 数据绑定(2) 控制流foreach绑定
foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中 假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM- ...
- KnockoutJS学习笔记10:KonckoutJS foreach绑定
KnockoutJS foreach绑定用来处理数组,通常用来将一个数组绑定到一个列表或者table中.在foreach绑定中,我们可以使用if.with等嵌套绑定. 示例代码: <tabl ...
- KnockOut 绑定之foreach绑定
foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定.当我们呈现一组list数据,或者一个表格的时候,十分有用. 如果你绑定的数组是一 ...
- 在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合
本篇体验使用 foreach 绑定一个Product集合. 首先使用构造创建一个View Model. var Product = function(data) { this.name = ko.ob ...
- KnockOut 绑定之foreach绑定(mvc+knockout)
什么时候使用foreach绑定 foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定.当我们呈现一组list数据,或者一个表格的时候, ...
- Knockout v3.4.0 中文版教程-16-控制流-foreach绑定
2. 控制流 1. foreach绑定 目的 foreach绑定会遍历一个数组,为每个数组项生成重复的元素标记结构并做关联.这在渲染列表或表格的时候特别有用. 假设你的数组是一个监控数组,之后无论你进 ...
- switch case 判断是否为按钮、设置属性 Load Foreach 绑定事件
private void button9_Click(object sender, EventArgs e) { foreach (Control CT in this.Controls) {//判断 ...
- 监控数组与foreach绑定-Knockout.js
html: <h2>Your seat reservations</h2> <table> <thead> <tr> ...
- knockoutJS学习笔记06:ko数组与模板绑定
前面已经介绍了基本的绑定和模板相关知识,接下来就看ko里的数组和模板绑定,数组和模板绑定应该是实际项目中用得比较多的,ko提供了很好的支持. 一.observaleArray 前面的监控属性都是单个对 ...
随机推荐
- python JSON API duckduckgo search engine 使用duckduckgo API 尝试搜索引擎
The duckduckgo.com's search engine is very neat to use. Acutally it has many things to do with other ...
- 游戏对象、组件和Prefabs
如标题所言,本文由3个部分组成,分别讲述游戏对象.组件和Prefabs(预设体). 1. 游戏对象 任何游戏对象都由组件组成,组件是实现一切功能所必需的.我们创建的对象会在Hierarchy视图中显示 ...
- linux ftp安装和配置
1. 启动VSFTP服务器 A:cenos下运行:yum install vsftpd B. 登录Linux主机后,运行命令:"service vsftpd start"C. ...
- 【转】关于JVM CPU资源占用过高的问题排查
http://my.oschina.net/shipley/blog/520062 一.背景: 先执行一个java程序里面开了两个线程分别都在while循环做打印操作. ? 1 # java -cp ...
- CreateMutex 创建一个有名字的互斥量的时候hMutex=CreateMutex(NULL,TRUE,"tickets")报错
编译器报错: 不能将参数 3 从“const char [8]”转换为“LPCWSTR”,怎么改成LPCWSTR类型 更改方法: hMutex=CreateMutex(NULL,TRUE,L" ...
- 【6】锋利的 jQuery 笔记
1. 代码技巧 1. 利用 id, class 实现同级隐藏显示 效果如下: 2. 字体放大效果 效果图: 3. tab 切换 效果图: 4. 切换样式 添加 Cookie 效果图: 5. 编写插件 ...
- delphi用TAdoStoredProc调用存储过程,兼容sql2005、2008、2014的远程事务问题
delphi7写的程序,在sql2000里没问题,调用sql2008.2014里的存储过程时,如果存储过程里操作了大量数据,很容易会莫名其妙的自己撤销掉,但是程序还识别不到,认为还在正常执行.今天尝试 ...
- windows Git安装
git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目 一.Git下载 官网地址:https://git-scm.com/download/win,选择相应的版本即可 二.安 ...
- OSI模型第二层数据链路层-STP协议
1.stp协议的由来. 在二层网络中,交换机起到了很重要的作用,如果有一台交换机出现故障会影响网络的使用,为了避免存在单点故障,在实际的二层链路中会采用链路冗余,也就是采用交换设备之间多条联络连接,即 ...
- python爬虫框架scrapy初试(二)
将该导航网站搜索出结果的页面http://www.dmoz.org/Computers/Programming/Languages/Python/Books/里面标题,及标题的超链接和描述爬下来. 使 ...