knockout 学习实例7 foreach
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<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> <script type="text/javascript">
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());
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h4>People</h4>
<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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul data-bind="foreach: months">
<li>
The current item is: <b data-bind="text:$data.firstName"></b>
</li>
</ul> <script type="text/javascript">
ko.applyBindings({
months: [ {firstName:"你的名字"},{firstName:"你的"}] });
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<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>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul data-bind="foreach: { data: myItems, afterAdd: yellowFadeIn }">
<li data-bind="text: $data"></li>
</ul> <button data-bind="click: addItem">Add</button> <script type="text/javascript">
ko.applyBindings({
myItems: ko.observableArray([ 'A', 'B', 'C' ]),
yellowFadeIn: function(element, index, data) {
$(element).filter("li")
.css({ 'backgroundColor': '#f00' })
// .animate({ backgroundColor: 'white' }, 800);
},
addItem: function() { this.myItems.push('New item'); }
});
</script>
</body>
</html>
knockout 学习实例7 foreach的更多相关文章
- knockout 学习实例2 text
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- knockout 学习实例6 attr
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- knockout 学习实例5 style
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>&l ...
- knockout 学习实例4 css
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- knockout 学习实例3 html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Knockout学习地址
Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的 ...
- knockout学习笔记目录
关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...
- Ant学习实例
ant 目录(?)[+] Ant学习实例 安装Ant 基础元素 project元素 target元素 property元素 完整示例 Ant学习实例 1.安装Ant 先从http://ant. ...
- knockout学习笔记10：demo
前面已经介绍了ko的基本用法,结合官方文档,基本就可以实际应用了.本章作为ko学习的最后一篇,实现一个简单的demo.主要集中在ko,所以后台数据都是静态的.类似于博园,有一个个人文章的分类列表,一个 ...
随机推荐
- laravel 中 与前端的一些事4 之合并压缩静态文件
合并压缩多个静态文件到一个文件里面,可以减少网站的http请求,稍微优化性能,提高网站的用户体验 使用elixir来实现: 敲命令 合并并压缩js和css文件
- 将Python脚本封装成exe可执行文件 转
将Python脚本封装成exe可执行文件 http://www.cnblogs.com/renzo/archive/2012/01/01/2309260.html cx_freeze是用来将 Pyt ...
- 转linq中的Single()、First()、Take(1) LINQ 标准的查询操作符 排序 orderby、thenby、Take
Single():操作一个集合,同时强要求只有一个对象匹配,并返回这一个. First():操作一个集合,可以有多个对象匹配,但是只返回第一个. Take(1):操作一个集合,可以有对个对象匹配,单只 ...
- ssh下：系统初始化实现ServletContextListener接口时，获取spring中数据层对象无效的问题
想要实现的功能:SSH环境下,数据层都交由Spring管理:在服务启动时,将数据库中的一些数据加载到ServletContext中缓存起来. 系统初始化类需要实现两个接口: ServletContex ...
- 斯诺登称NSA攻破互联网加密技术
据财新网报道,本已渐渐平静的斯诺登泄密事件在9月6日再掀波澜.英国<卫报>.美国<纽约时报>和美国非盈利调查新闻机构ProPublica联合报道称,根据斯诺登提供的大量文件,美 ...
- 通过top命令发现plymouthd进程cpu负载达到近100% 解决办法
最近几天一直遇到服务器cpu100%, 通过top命令发现plymouthd进程cpu负载达到近100% 解决方法:打开 /boot/grub/menu.lst , 去掉 “rhgb quiet”这两 ...
- Maven排除项目中同名不同版本的jar
今天突然发现web项目打包后的exe居然有200M+了,心想不应该有这么大的啊,于是检查了一番发现引用的jar有130+个,仔细一瞅发现好多同名的但是不同版本的jar,比如说有commons-http ...
- MATLAB 图像分类 Image Category Classification Using Bag of Features
使用MATLAB实现图像的识别,这是MATLAB官网上面的例子,学习一下. http://cn.mathworks.com/help/vision/examples/image-category-cl ...
- hdu 1036 (I/O routines, fgets, sscanf, %02d, rounding, atoi, strtol) 分类： hdoj 2015-06-16 19:37 32人阅读 评论(0) 收藏
thanks to http://stackoverflow.com/questions/2144459/using-scanf-to-accept-user-input and http://sta ...
- 2014年5月份第3周51Aspx源码发布详情
HGM简单连连看游戏源码 2014-5-19 [VS2010]源码描述:这是一款基于WinForm窗体程序的简单水果连连看的小游戏.界面比较美观, 功能如下:该游戏可以显示当前关卡,还有剩余时间.重 ...