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 前面的监控属性都是单个对 ...
随机推荐
- TaskTracker获取并执行map或reduce任务的过程1
TaskTracker获取并执行map或reduce任务的过程(一) 我们知道TaskTracker在默认情况下,每个3秒就行JobTracker发送一个心跳包,也就是在这个心跳包中包含对任务的请求. ...
- MFC控件(9):network address control
这个控件的名字倒是取的不错,一看就知道是让你输入IP地址或host name的. 不过一打开看到那控件的样子就完全是个Edit control.不过该控件对应的类也确实是继承自类CEdit. 先拖个控 ...
- 《Head First Python》学习笔记03 异常处理
异常(运行时错误): 当代码逻辑遇到意外事件时,比如打开一个文件,却发现文件不存在.这时是增加额外的代码处理逻辑,还是捕获异常呢?答案是:Python优先推荐捕获异常,然后恢复. Python异常机制 ...
- 最近学习了下BI(商业智能)做报表
最近公司购买了Style intelligence 出的BI报表工具,接触新的东西不是很容易上手,这个东西是别的项目组用的,我们项目组由于进度比较快就让我先到他们项目组帮他们,为了使用这个东西,他们已 ...
- [ActiveX]使用VS2010创建MFC ActiveX工程项目
ActiveX的基本概念 ActiveX控件可以看作是一个极小的服务器应用程序,它不能队列运行,必须嵌入到某个容器程序中,与该容器一起运行.这个容器包括web网页,应用程序窗体等等. ActiveX控 ...
- There is no getter for property named 'userSpAndSp' in 'class com.uauth.beans.UserSpAndSp'
mybatis 报错There is no getter for property named 'userSpAndSp' in 'class com.uauth.beans.UserSpAndSp' ...
- jquery ajax请求成功,数据返回成功,seccess不执行的问题
1.状态码返回200--表明服务器正常响应了客户端的请求: 2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据. ...
- CentOS7--iptables的配置
在红帽RHEL7系统中firewalld服务取代了iptables服务,但依然可以使用iptables命令来管理内核的netfilter. iptables命令中则常见的控制类型有: ACCEPT:允 ...
- java基础练习 8
public class Eighth { /*判断101-200之间有多少个素数,并输出所有素数.素数又叫质数,就是除了1和它本身之外,再也没有整数能被它整除的数.也就是素数只有两个因子.*/ pu ...
- Nginx stream(TCP/UDP)负载均衡
Nginx-1.11.6编译安装 nginx编译安装,(平台:ubuntu 14.04); sudo apt-get install zlib1g-dev sudo apt-get install l ...