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 前面的监控属性都是单个对 ...
随机推荐
- Linq 结果转成 json
public string BindGrid(string page,string rows) { int pageIndex = 0; if ...
- 读取的XML节点中带有冒号怎么办?
读取的XML节点中带有冒号怎么办? 昨天,编程读取XML的时候,遇上了类似下面的一段XML <a:root xmlns:a="http://ww.abc.com/"> ...
- [置顶] vs2008 编译adb 支持4.2 android 系统(改进版)
QQ: 2506314894 本想晚些时候放出来的,但是按捺不住啊,所以修改了之后就立即放出来了.先说明一下,这次用的adb 的源码比较新的,用的vs2008 编译出来,只有一个exe 文件,直接就可 ...
- 从零开始学C++之对象的使用(二):四种对象生存期和作用域、static 用法总结
一.四种对象生存期和作用域 栈对象 隐含调用构造函数(程序中没有显式调用) 堆对象 隐含调用构造函数(程序中没有显式调用),要显式释放 全局对象.静态全局对象 全局对象的构造先于main函数 已初始化 ...
- JAVA线程间的状态转换
线程间的状态转换: 1. 新建(new):新创建了一个线程对象. 2. 可运行(runnable):线程对象创建后,其他线程(比如main线程)调用了该对象的start()方法.该状态的线程位于可运 ...
- PYTHON黑帽编程 4.1 SNIFFER(嗅探器)之数据捕获(下)
上一节(<4.1 SNIFFER(嗅探器)之数据捕获(上)>)中, 我们讲解了通过Raw Socket的方式来编写Sniffer的基本方法. 本节我们继续来编写Sniffer,只不过使用现 ...
- 【C语言】字符串模块
一.字符串简介 * 在Java中,一个字符串可以用String类型来存储 String s = "MJ"; C语言中没有String这种类型.其实字符串就是字符序列,由多个字符组成 ...
- 通过python为zabbix发送告警邮件
最近部署ZABBIX的邮件告警时,用刚学的python来写告警邮件脚本. 由于时间有限,我只对关键步骤做截图,对zabbix的基本配置略过. python代码如下 1 #!/usr/bin/pytho ...
- Nopcommerce架构浅谈之架构层次
前面谈到了系统的文件,从文件结构中我们也可以看出Nop的层次划分还是非常清晰,下面我将介绍下Nop的架构层次,并对每个层做简要的介绍,先看我画的层次图. 这个系统基本上按照了ddd的形式做了划分,我本 ...
- H5与CS3权威下.19 选择器(2)结构性伪类选择器
1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...