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

  1. springmvc学习笔记(10)-springmvc注解开发之商品改动功能

    springmvc学习笔记(10)-springmvc注解开发之商品改动功能 标签: springmvc springmvc学习笔记10-springmvc注解开发之商品改动功能 需求 开发mappe ...

  2. thinkphp学习笔记10—看不懂的路由规则

    原文:thinkphp学习笔记10-看不懂的路由规则 路由这部分貌似在实际工作中没有怎么设计过,只是在用默认的设置,在手册里面看到部分,艰涩难懂. 1.路由定义 要使用路由功能需要支持PATH_INF ...

  3. 《C++ Primer Plus》学习笔记10

    <C++ Primer Plus>学习笔记10 <<<<<<<<<<<<<<<<<&l ...

  4. SQL反模式学习笔记10 取整错误

    目标:使用小数取代整数 反模式:使用Float类型 根据IEEE754标识,float类型使用二进制格式编码实数数据. 缺点:(1)舍入的必要性: 并不是所有的十进制中描述的信息都能使用二进制存储,处 ...

  5. golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息

    golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放 ...

  6. Spring MVC 学习笔记10 —— 实现简单的用户管理(4.3)用户登录显示全局异常信息

    </pre>Spring MVC 学习笔记10 -- 实现简单的用户管理(4.3)用户登录--显示全局异常信息<p></p><p></p>& ...

  7. Hadoop学习笔记(10) ——搭建源码学习环境

    Hadoop学习笔记(10) ——搭建源码学习环境 上一章中,我们对整个hadoop的目录及源码目录有了一个初步的了解,接下来计划深入学习一下这头神象作品了.但是看代码用什么,难不成gedit?,单步 ...

  8. APUE学习笔记——10.9 信号发送函数kill、 raise、alarm、pause

    转载注明出处:Windeal学习笔记 kil和raise kill()用来向进程或进程组发送信号 raise()用来向自身进程发送信号. #include <signal.h> int k ...

  9. SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传

    SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...

随机推荐

  1. yii学习小结

    对yii框架搭建的平台运维过程中,会不断地发现很多新的特性和问题,现一一记录下来,便于后续学习~ 1.日志  在/runtime目录中    参考:http://www.cnblogs.com/you ...

  2. 如何由jdk的安装版本改成非安装版本

    背景. 官网一般只提供windows下的exe文件,不提供zip打包文件.有些不愿意使用安装版本. 解决方法 本文以windows 7下安装jdk-6u35-windows-x64.exe为例说明 1 ...

  3. TCP/IP详解学习笔记(6)-- IP选路

    1.概述      路由算法是用于获取路由表中的路由项目.它是路由选择协议的核心. 2.路由算法的分类      从路由算法能否随网络的通信量或拓扑自适应的进行调整变化来分,可以分为两类. 静态路由选 ...

  4. 详解Ossim 4.3控制台

    在Ossim 4.2以后的发行版中增加了控制台功能下面加以详细说明,当Ossim 启动之后,在控制台以root身份登录系统后会执行ossim-setup脚本,然后显示如下图1所示,了解这些功能,以及操 ...

  5. Sublime 3114 + 转换GBK方法

    下载地址: http://files.cnblogs.com/files/wuyifu/Sublime_Text_Build_3114_x64_Setup.zip -– BEGIN LICENSE - ...

  6. WPF拖动DataGrid中的数据到ListBox

    1.效果图: 2.XAML <Window x:Class="WpfApplication2.MainWindow" xmlns="http://schemas.m ...

  7. 第五章_PHP流程控制

    1.顺序结构 2.分支结构 2.1 if...else <?php $today=date("w"); //获取今天星期几 if($today==0){ echo 'Sund ...

  8. Windows和Linux下Mysql 重置root 密码

    Windows系统下一:进入Windows窗口cmd命令行下,停止mysql服务: net stop mysql二:进入mysql的安装目录下,进去bin目录mysqld-nt.exe --skip- ...

  9. CentOS下修复grub引导程序

    1.早上装系统,试了好几次.最终grub修复成功! 解决方法大致如下: 开机遇见 grub>的时候 下面看解决方法 首先是既然插上U盘能进系统  那我们插上U盘 正常进入系统  然后看操作 [r ...

  10. [leetcode]_Palindrome Number

    判断integer是否为回文串(负数全部不为回文串) 思路很直接,提取出integer中的每一位,一头一尾进行比较是否相同. 一次AC , 直接上代码: public boolean isPalind ...