参考：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>