推荐阅读：https://www.cnblogs.com/smallprogram/p/5976954.html
一、下载Knockout的最新版本
在正式开发和产品使用中，推荐使用默认的压缩版本（knockout.x.x.js）
下载地址：http://knockoutjs.com/downloads/index.html
二、数据监控
1、视图模型与监控
Model-View-View Model (MVVM)是一种创建用户界面的设计模式。
通过它只要将UI界面分成以下3个部分，就可以使复杂的界面变得简单：
A、Model，用于存储你应用程序数据，这些数据表示你业务领域的对象和数据操作（例如：银行可以进行资金转账），
并且独立于任何界面。当使用KO的时候，通常是使用Ajax向服务器请求数据来读写这个数据模型。
用于存储你应用程序数据，这些数据表示你业务领域的对象和数据操作（例如：银行可以进行资金转账），并且独立于任何界面。当使用KO的时候，通常是使用Ajax向服务器请求数据来读写这个数据模型。
B、View Model，纯粹用于描述数据内容和页面操作的数据模型。
例如，如果你想实现一个列表编辑器，你的ViewModel（数据模型）就是项目清单对象和你所暴露出来的添加和删除列表项的方法。 注意：这不是UI本身，它不具有任何按钮和显示样式的概念。这不是持久化的数据模型—它仅是用户当前使用的未保存的数据。当使用KO时，你的View Model（数据模型）是纯粹的不包含HTML知识的JavaScript对象，保持View Model（数据模型）抽象在使用时可以保持简单，因此你可以更简单的操作管理更复杂的行为。
C、View，代表View Model状态的一个可见、互动的UI界面。它主要用于显示View Model的数据信息、发送用户命令（例如，当用户点击按钮）以及在View Model发生变化时保持自动更新。
使用KO时，你的View层主要就是简单的将HTML文档声明式的绑定到View Model，将它们关联起来。另外，你也可以利用模版从View Model获取数据动态生成HTML。
代码如下：
步骤：数据模型(VM) -> 视图(V) -> 激活KO绑定关系（ko.applyBindings ）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type='text/javascript'src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script type='text/javascript'src='http://knockoutjs.com/downloads/knockout-3.4.2.js'></script>
<script type="text/javascript">
//1、View Model（数据模型）
var myViewModel = {
//监控(Observable):视图模型变化自动更新你的UI
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};
//4、注册订阅,通知,变化监控，你可以调用subscribe函数
myViewModel.personName.subscribe(function (newValue) {
alert("The person's new name is " + newValue);
});
////5、终止订阅
//var subscription = myViewModel.personName.subscribe(function (newValue) { /* do stuff */ });
//// ...then later...
//subscription.dispose(); // I no longer want notifications
//6、监控发生之前执行相关业务，可以使用beforeChange事件
myViewModel.personName.subscribe(function (oldValue) {
alert("The person's previous name is " + oldValue);
}, null, "beforeChange");
//7、强行监控属性实时通知用户
//当赋值一个包含原始值（一个数字，字符串，布尔值，或者为null）监控属性，使用内置的notified ，以确保一个观测监控属性的用户总是得到通知，即使该值是相同的。
myViewModel.personName.extend({ notify: 'always' });
//8、延缓或抑制更改通知
//通常情况下，监控属性值改变会立即通知其用户。
//但是，如果一个监控属性频繁更新会带来高昂的数据传输代价，你可以通过限制或延迟变更通知获得更好的性能。这是通过使用rateLimit增量实现
// 确保每50毫秒周期内通知不超过一次的更改
myViewModel.personName.extend({ rateLimit: 50 });
//3、DOM就绪后,激活KO的绑定关系，使之生效。
$(function () {
ko.applyBindings(myViewModel);
//3、写监控属性
myViewModel.personName('Mary')
//读监控属性
console.log(myViewModel.personName());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<%--2、绑定模型--%>
The name is <span data-bind="text: personName"></span>
</form>
</body>
</html>
2、监控属性数组
效果：
代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type='text/javascript'src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script type='text/javascript'src='http://knockoutjs.com/downloads/knockout-3.4.2.js'></script>
<script type="text/javascript">
//var myObservableArray = ko.observableArray(); // 最初是空数组
//myObservableArray.push('Some value'); // 添加值到数组
var SimpleListModel = function (items) {
this.items = ko.observableArray(items);
this.itemToAdd = ko.observable("");//默认值为0
this.addItem = function () {
if (this.itemToAdd() != "") {
this.items.push(this.itemToAdd()); // 添加文本框值到数组
this.itemToAdd(""); // Clears the text box
}
}.bind(this); // Ensure that "this" is always this view model
};
$(function () {
ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]), document.getElementById('form2'));
});
</script>
</head>
<body>
<!--提交绑定-->
<form id="form2" data-bind="submit: addItem">
New item:
<input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
<p>Your items:</p>
<select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>
</body>
</html>