KnockoutJS学习笔记10:KonckoutJS foreach绑定
KnockoutJS foreach绑定用来处理数组,通常用来将一个数组绑定到一个列表或者table中。在foreach绑定中,我们可以使用if、with等嵌套绑定。
示例代码:
<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>
绑定规则:
在ViewModel中,people是一个数组,foreach绑定将会遍历这个数组,将每一项生成一个tr,然后添加在tbody中。
binding context
在foreach中,我们可以使用绑定上下文,完整的绑定上下文包括:
- $data:当前项的数据
- $index:当前项的序号
- $parent:当前项的父级数据
要了解更多,请参考完整的数据上下文。
$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是一个json对象,可以这样使用:
<td data-bind="text: $data.firstName"></td>
$index和$parent示例:
<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>
使用别名 as
尽管可以方便的使用上下文数据,但有些时候给$data起一个更有意义的别名更容易理解,我们来看看as关键字的用法:
<ul data-bind="foreach: { data: people, as: 'person' }"></ul>
在这段代码中,people的每一个数据项被当作person来访问,其实person就是$data
下面是一个完整的例子:
<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>
不使用container
在前面的内容中我们介绍了使用虚拟节点来完成绑定,这种虚拟节点同样能够用在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>
这种方法非常实用。
KnockoutJS学习笔记10:KonckoutJS foreach绑定的更多相关文章
- springmvc学习笔记(10)-springmvc注解开发之商品改动功能
springmvc学习笔记(10)-springmvc注解开发之商品改动功能 标签: springmvc springmvc学习笔记10-springmvc注解开发之商品改动功能 需求 开发mappe ...
- thinkphp学习笔记10—看不懂的路由规则
原文:thinkphp学习笔记10-看不懂的路由规则 路由这部分貌似在实际工作中没有怎么设计过,只是在用默认的设置,在手册里面看到部分,艰涩难懂. 1.路由定义 要使用路由功能需要支持PATH_INF ...
- 《C++ Primer Plus》学习笔记10
<C++ Primer Plus>学习笔记10 <<<<<<<<<<<<<<<<<&l ...
- SQL反模式学习笔记10 取整错误
目标:使用小数取代整数 反模式:使用Float类型 根据IEEE754标识,float类型使用二进制格式编码实数数据. 缺点:(1)舍入的必要性: 并不是所有的十进制中描述的信息都能使用二进制存储,处 ...
- golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息
golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放 ...
- Spring MVC 学习笔记10 —— 实现简单的用户管理(4.3)用户登录显示全局异常信息
</pre>Spring MVC 学习笔记10 -- 实现简单的用户管理(4.3)用户登录--显示全局异常信息<p></p><p></p>& ...
- Hadoop学习笔记(10) ——搭建源码学习环境
Hadoop学习笔记(10) ——搭建源码学习环境 上一章中,我们对整个hadoop的目录及源码目录有了一个初步的了解,接下来计划深入学习一下这头神象作品了.但是看代码用什么,难不成gedit?,单步 ...
- APUE学习笔记——10.9 信号发送函数kill、 raise、alarm、pause
转载注明出处:Windeal学习笔记 kil和raise kill()用来向进程或进程组发送信号 raise()用来向自身进程发送信号. #include <signal.h> int k ...
- SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传
SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...
随机推荐
- VC7 HTML Dialog开发实例讲解
开发环境:VS7,Windows XP,Windows 2K 在VS7中添加了一种新的对话框类:CDHtmlDialog,顾名思义就是能够显示DHTML内容的对话框,但不同与以前的CHTMLView不 ...
- JSON时间转换格式化
通常JSON时间一般是这样的格式. 1 /Date(1436595149269)/ 通常我们用AJAX获取下来的JSON数据,如果有时间,都是这种格式的.其中,中间的一段数字"1436595 ...
- 【IHttpHandler】在ASP.Net2.0中使用UrlRewritingNet实现链接重写
很多时候我们需要链接转向(Url Rewriting),例如二级域名转向.文章访问链接等场合. 让我们看两个例子: 1 你现在看到的当前作者的博客园的域名: http://jx270.cnblogs. ...
- 【MVC】关于Action返回结果类型的事儿(上)
一. ASP.NET MVC 1.0 Result 几何? Action的返回值类型到底有几个?咱们来数数看. ASP.NET MVC 1.0 目前一共提供了以下十几种Action返回结果类型: 1. ...
- poj1942 Paths on a Grid
处理阶乘有三种办法:(1)传统意义上的直接递归,n的规模最多到20+,太小了,在本题不适用,而且非常慢(2)稍快一点的算法,就是利用log()化乘为加,n的规模虽然扩展到1000+,但是由于要用三重循 ...
- oracle split
select * from table(fun_strsplit('1,2,3,4,5')); 1.创建一个类型 ) 2.创建函数 CREATE OR REPLACE FUNCTION Fun_Str ...
- 【SMS】移动短信网关返回信息状态代码说明【China Mobile】
1 由SMSC返回的一般结果状态报告 含义 说明 处理建议DELIVRD 消息发送成功 用户成功接收到短信 ??EXPIRED 因为用户长时间关机或者不在服务区等导致的短消息超时没有递交到用户手机上 ...
- DPDK内存管理-----(三)rte_malloc内存管理
rte_malloc()为程序运行过程中分配内存,模拟从堆中动态分配内存空间. void * rte_malloc(const char *type, size_t size, unsigned al ...
- 测试一个C段网络的联通性
#!/bin/bashPATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/binexport PATHnetwork ...
- [leetcode]_Integer to Roman
题目:对应之前那道将罗马数字转换整型数字的题目.反过来. 思路:刚开始做的时候,想着用程序进行判断,复杂的要死.网络了别人代码,非常清晰. 代码: 1 public String intToRoman ...