目的

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绑定的更多相关文章

  1. KnockoutJS 3.X API 第四章 数据绑定(2) 控制流foreach绑定

    foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中 假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM- ...

  2. KnockoutJS学习笔记10:KonckoutJS foreach绑定

      KnockoutJS foreach绑定用来处理数组,通常用来将一个数组绑定到一个列表或者table中.在foreach绑定中,我们可以使用if.with等嵌套绑定. 示例代码: <tabl ...

  3. KnockOut 绑定之foreach绑定

    foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定.当我们呈现一组list数据,或者一个表格的时候,十分有用. 如果你绑定的数组是一 ...

  4. 在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合

    本篇体验使用 foreach 绑定一个Product集合. 首先使用构造创建一个View Model. var Product = function(data) { this.name = ko.ob ...

  5. KnockOut 绑定之foreach绑定(mvc+knockout)

    什么时候使用foreach绑定 foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定.当我们呈现一组list数据,或者一个表格的时候, ...

  6. Knockout v3.4.0 中文版教程-16-控制流-foreach绑定

    2. 控制流 1. foreach绑定 目的 foreach绑定会遍历一个数组,为每个数组项生成重复的元素标记结构并做关联.这在渲染列表或表格的时候特别有用. 假设你的数组是一个监控数组,之后无论你进 ...

  7. switch case 判断是否为按钮、设置属性 Load Foreach 绑定事件

    private void button9_Click(object sender, EventArgs e) { foreach (Control CT in this.Controls) {//判断 ...

  8. 监控数组与foreach绑定-Knockout.js

    html: <h2>Your seat reservations</h2> <table>    <thead>  <tr>         ...

  9. knockoutJS学习笔记06:ko数组与模板绑定

    前面已经介绍了基本的绑定和模板相关知识,接下来就看ko里的数组和模板绑定,数组和模板绑定应该是实际项目中用得比较多的,ko提供了很好的支持. 一.observaleArray 前面的监控属性都是单个对 ...

随机推荐

  1. TaskTracker获取并执行map或reduce任务的过程1

    TaskTracker获取并执行map或reduce任务的过程(一) 我们知道TaskTracker在默认情况下,每个3秒就行JobTracker发送一个心跳包,也就是在这个心跳包中包含对任务的请求. ...

  2. MFC控件(9):network address control

    这个控件的名字倒是取的不错,一看就知道是让你输入IP地址或host name的. 不过一打开看到那控件的样子就完全是个Edit control.不过该控件对应的类也确实是继承自类CEdit. 先拖个控 ...

  3. 《Head First Python》学习笔记03 异常处理

    异常(运行时错误): 当代码逻辑遇到意外事件时,比如打开一个文件,却发现文件不存在.这时是增加额外的代码处理逻辑,还是捕获异常呢?答案是:Python优先推荐捕获异常,然后恢复. Python异常机制 ...

  4. 最近学习了下BI(商业智能)做报表

    最近公司购买了Style intelligence 出的BI报表工具,接触新的东西不是很容易上手,这个东西是别的项目组用的,我们项目组由于进度比较快就让我先到他们项目组帮他们,为了使用这个东西,他们已 ...

  5. [ActiveX]使用VS2010创建MFC ActiveX工程项目

    ActiveX的基本概念 ActiveX控件可以看作是一个极小的服务器应用程序,它不能队列运行,必须嵌入到某个容器程序中,与该容器一起运行.这个容器包括web网页,应用程序窗体等等. ActiveX控 ...

  6. 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' ...

  7. jquery ajax请求成功,数据返回成功,seccess不执行的问题

    1.状态码返回200--表明服务器正常响应了客户端的请求:       2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据.         ...

  8. CentOS7--iptables的配置

    在红帽RHEL7系统中firewalld服务取代了iptables服务,但依然可以使用iptables命令来管理内核的netfilter. iptables命令中则常见的控制类型有: ACCEPT:允 ...

  9. java基础练习 8

    public class Eighth { /*判断101-200之间有多少个素数,并输出所有素数.素数又叫质数,就是除了1和它本身之外,再也没有整数能被它整除的数.也就是素数只有两个因子.*/ pu ...

  10. Nginx stream(TCP/UDP)负载均衡

    Nginx-1.11.6编译安装 nginx编译安装,(平台:ubuntu 14.04); sudo apt-get install zlib1g-dev sudo apt-get install l ...