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,所以后台数据都是静态的.类似于博园,有一个个人文章的分类列表,一个 ...
随机推荐
- linux笔记：shell基础-bash基本功能
历史命令的调用: 命令和文件补全(如果当前有多个可选的补全,则按2次tab键,可以列出所有的可选项): 命令别名: 让别名永久生效: 删除别名: bash常用快捷键: 标准输入输出: 输出重定向: 输 ...
- jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性
1.jQuery为动态添加的元素绑定事件:在1.7之后,添加了live()方法,1.9后又被移除,1.9中可用on()方法: $(function() { $('.btn').on('click', ...
- linux 基本命令操作
1.ls 命令 ls -a 列出所有文件,包括隐藏文件 ls -l 列出文件详细信息 ls -r 列出所有文件包括文件夹 查询具体文件可以在命令后面加 |grep 要匹配的字符串,方便我们查找, ...
- 爱壁纸 站立会议(六)--Spring阶段总结会议
爱壁纸 站立会议(六)--Spring阶段总结会议 一.会议时间 2014年4月15日 星期三 21:00-21:20 今天是spring阶段最后一天,大家都对这一星期的任务概况做出了总结所以时间稍微 ...
- spark0.9.1 assembly build-RedHat6.4 YARN 2.2.0
1. Install git on RedHat6.4: 1.1. setup your local yum repo 1.2. yum install git 2. Install JDK and ...
- 排序小结(C版)
一.快速排序(C源码) #include <stdlib.h> #include <stdio.h> int adjust(int a[],int start,int end) ...
- ArrayList与普通数组的区别
import java.util.ArrayList; public class Shuzuqubie { public static void main(String[] args){ String ...
- 利用Scrollow写一个下拉刷新
利用scrollView滑动的2个监听方法实现 //滑动结束时候 出发的方法 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView ...
- MJExtension框架介绍
MJExtension框架介绍 标签: MJExtension 2015-05-01 08:22 1120人阅读 评论(0) 收藏 举报 分类: Foundation(14) 版权声明:本文为博主 ...
- Poisson Distribution——泊松分布
老师留个小作业,用EXCEL做不同lambda(np)的泊松分布图,这里分别用EXCEL,Python,MATLAB和R简单画一下. 1. EXCEL 运用EXCEL统计学公式,POISSON,算出各 ...