参考：http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html
因为网上教程太少了，但是客户需要用knockout框架，还是不得不去找，根据网上的来源做了简单的Demo，其实就加了点注释
Demo1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<title>ko1</title>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="knockout-3.3.0.js" type="text/javascript"></script>
<script src="knockout.validation.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 显示ViewModel的View -->
<div>
<p data-bind="text: firstName"></p>
<p data-bind="text: lastName"></p>
<input data-bind="value: firstName"/>
<input data-bind="value: lastName"/>
</div>
<script>
//定义ViewModel
var ViewModel = function () {
this.firstName = "吃兔纸";
this.lastName = "不吐毛";
}
//applyBindings()一定要放最后面，不然无效
//绑定ViewModel
ko.applyBindings(ViewModel);
</script>
</body>
</html>
Demo2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<title>ko2</title>
<script type="text/javascript" src="knockout-3.3.0.js">
//首先导入knockoutjs框架
</script>
</head>
<body>
<!-- 显示ViewModel的View -->
<h3>午餐时间</h3>
<p>菜单:
<select data-bind="options: availableMeals,
optionsText: 'mealName',
value: chosenMeal">
</select>
<!-- 通过ko.observable()把值显示在页面 -->
<p>
你已选择:
<b data-bind="text: chosenMeal().description"></b>
(价格: <span data-bind='text: chosenMeal().extraCost'></span>)
</p>
<!-- 因为applyBindings()绑定的时候需要在最后面 -->
<script>
//定义ViewModel
//使用KO的时候，通常说是向服务器调用Ajax读写这个存储的模型数据
var availableMeals = [
{ mealName: '标准餐', description: '干面包皮', extraCost: 0 },
{ mealName: '优质餐', description: '新鲜芝士面包', extraCost: 9.95 },
{ mealName: '豪华餐', description: '牛排和葡萄酒', extraCost: 18.50 }
];
//var viewModel = {
//chosenMeal: ko.observable(availableMeals[0])
//};
//ko.applyBindings(viewModel);
function viewModel() {
//可以监控（observe）属性的值并且回应它的变化
this.chosenMeal = ko.observable(availableMeals[0])
}
ko.applyBindings(new viewModel());
//applyBindings()一定要放最后面，不然无效
//绑定ViewModel
//不知道为什么绑定一个空函数也可以使用availableMeals[]的数据
//激活knockout
//ko.applyBindings(availableMeals);
</script>
</body>
</html>
Demo3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"></meta>
<title>ko5</title>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="knockout.validation.min.js"></script>
<script type="text/javascript" src="knockout-3.3.0.js"></script>
</head>
<body>
<p>First name: <input data-bind="value: firstName"/></p>
<p>Last name: <input data-bind="value: lastName"/></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
<script type="text/javascript">
var viewModel = {
firstName: ko.observable("吃兔纸"),
lastName: ko.observable("不吐毛")
};
//dependentObservable()依赖监控属性
viewModel.fullName = ko.dependentObservable(function () {
return viewModel.firstName() + " " + viewModel.lastName();
});
ko.applyBindings(viewModel);
</script>
</body>
</html>
相关推荐
PS抠图神器：KnockOut 2.88汉化版下载及教程，1、执行 knockout2.0安装 文件夹中的setup.exe，第一个安装目录默认即可，第二个目录为 photoshop（只支持32位） 安装目录下的plug-ins文件夹； 2、执行 V2.88 Update ...
KnockOut抠图插件，支持32、64位版系统(与photoshop位数无关) 目前测试使用win10(64位)、photoshop cs6 13.0(32位) 1.下载后放在photoshop安装目录中的Plug-ins中（解压后Plug-ins文件夹中应该会包含：KnockOut.8bf...
1、执行 knockout2.0安装 文件夹中的setup.exe，第一个安装目录默认即可，第二个目录为 photoshop（只支持32位） 安装目录须设置为Photoshop目录下的/Plug-ins/Filters文件夹中。（若没有Filters文件夹就需要自己...
之前在一家公司里用过Knockout，是easyui 和 Knockout结合 的。下面的这本应该不错。 目录 前言 第一部分入门指南 第1章MVC介绍 创建第一个项目 分析HomeController 分析View 理解URL结构 小结 第2章...
越来越多的人正在使用Photoshop抠图，虽然Photoshop功能越来越强，但体积也越来越庞大，而且Photoshop扣毛发、透明物体比较困难，这却正是KnockOut的强项。KnockOut2.0只是Photoshop的一个滤镜插件，不能独立运行。...
PS抠图专业插件 Knockout2.88安装版： 经本人测试完美解决WIN7及以上系统上\绿色版精剪版\ 不可用问题。 安装版原版为英文，压缩包内 knockout2.0汉化补丁文件夹 内为汉化补丁； 安装执行Setup.exe即可； 汉化补丁...
在 Corel Knockout 之中，若背景较为单纯时，我们只要定义 Inside 及 Outside 两个选取区域，再按一下处理( Process )钮，通常便能完成去背的作业。 其去背的准确、快速及方便、容易程度，可谓其它软件都难以...
Corel 公司出品的专业去背景软件，连极细的毛发都能从复杂...请参阅软件详细介绍 和更多的软件抠图使用实例抠图大师Corel Knockout的蒙板技术 、Knockout常规抠图实例：毛绒小熊 、Knockout抠图实例：透明玻璃杯......
Corel 公司出品的专业去背景软件，连极细的毛发都能从复杂...请参阅软件详细介绍 和更多的软件抠图使用实例抠图大师Corel Knockout的蒙板技术 、Knockout常规抠图实例：毛绒小熊 、Knockout抠图实例：透明玻璃杯......
在 Corel Knockout 之中，若背景较为单纯时，我们只要定义 Inside 及 Outside 两个选取区域，再按一下处理( Process )钮，通常便能完成去背的作业。 其去背的准确、快速及方便、容易程度，可谓其它软件都难以...
Knockout是一个以数据模型（data model）为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新（比如：更新依赖于用户的行为或者外部数据源的改变），KO能够很...
knockout 教程 中文版 Knockout使用js代码达到双向绑定的目的，类似Silverlight/WPF里的绑定一样，我们主要就是利用相关的特性进行开发的，极大地减少了代码开发量。
KnockOut是一款由Corel公司推出的专业抠图软件，这款抠图工具非常给力，KnockOut的强大之处在于连极细的毛发都能从复杂的背景中分离出来，精准、方便、快速、容易，绝对是一款抠图好帮手。 软件说明：在 Corel ...
2000年1月，COREL把它从它原来的东家那里收购回来之后，KNOCKOUT就改了姓氏，变成Procreate KnockOut (Procreate 是Corel的一个专业产品系列)，级别也长了2次，现在已经是2.0版本了。它的形式和功能也都随之有了...
为此，Corel公司开发了专业的抠图软件knockout，该软件连极细的毛发都能从复杂的背景中分离出来。特别是2.0版本更是比1.5有了质的飞跃。利用它配合PhotoShop滤镜使用，在图像输出上会简化许多（knockout 2.0处理完后...
knockout 2.0汉化版是由Corel公司推出的一款去背景软件，又称PS抠图神器，采用独家的抠图技术，细小的毛发也能快速的从复杂的背景中分离出来，是PS中比较比较好用的抠图软件，可以大大提高工作效率，推荐大家下载！
knockout-master.zip 源码
knockout-3.4.2下载 一直研究knockout有兴趣的朋友一起
knockout seajs .net中实战应用