前言
1.创建一个ViewModel
2.为ViewModel创建一个声明式绑定的简单的View
The name is
3.激活Knockout
ko.applyBindings(myViewModel);
4.查看运行效果
Observables监控属性
现在已经知道如何创建一个简单的view model并且通过binding显示它的属性了。但是KO一个重要的功能是当你的view model改变的时候能自动更新你的界面。当你的view model部分改变的时候KO是如何知道的呢？答案是：你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript objects，能够通知订阅者它的改变以及自动探测到相关的依赖。
例如：将上述的例子修改为
var myViewModel = { personName: ko.observable('aehyok'), personAge: ko.observable(25) }; 你根本不需要修改view – 所有的data-bind语法依然工作，不同的是他能监控到变化，当值改变时，view会自动更新。
监控属性的读操作（read）
///监控属性的读操作（read） alert(myViewModel.personAge);
监控属性的写操作（write）
///监控属性的写操作（write） myViewModel.personName("aehyok-Test");
Dependent Observables依赖监控属性
如果你已经有了监控属性firstName和lastName，你想显示全称怎么办？ 这就需要用到依赖监控属性了 – 这些函数是一个或多个监控属性， 如果他们的依赖对象改变，他们会自动跟着改变。
例如：继续在上面的ViewModel中添加两个属性 firstName和lastName
var myViewModel = { personName: ko.observable('aehyok'), personAge: ko.observable(25), firstName: ko.observable('aehyok'), lastName: ko.observable('Leo') }; 并且添加一个依赖监控属性，来返回姓名的全称
///依赖监控属性 myViewModel.fullName = ko.dependentObservable(function () { return this.firstName() + " " + this.lastName(); }, myViewModel); 并且绑定到View视图界面上的元素
The fullname is
不管firstName还是lastName改变，全称fullName都会自动更新（不管谁改变，执行函数都会调用一次，不管改变成什么，他的值都会更新到UI或者其他依赖监控属性上）。
优化上面fullname的监控属性
var viewModel = { firstName: ko.observable("aehyok"), lastName:ko.observable("Leo") }; 对fullName的依赖监控属性进行调整
viewModel.fullName = ko.dependentObservable({ read:function() { return this.firstName() + " " + this.lastName(); }, write:function(value) { var lastSpacePos = value.lastIndexOf(" "); if(lastSpacePos>0) { this.firstName(value.substring(0, lastSpacePos)); this.lastName(value.substring(lastSpacePos + 1)); } }, owner: viewModel }); 这个例子里，写操作的callback接受写入的值，把值分离出来，分别写入到“firstName”和“lastName”上。 你可以像普通情况一样将这个view model绑定到DOM元素上，如下：
First name:
Last name:
Hello, !
然后运行在文本框上录入会看到如下效果
上面的view model演示的是通过一个简单的参数来初始化依赖监控属性。你可以给下面的属性传入任何JavaScript对象：
1. read — 必选，一个用来执行取得依赖监控属性当前值的函数。
2.write — 可选，如果声明将使你的依赖监控属性可写，别的代码如果这个可写功能写入新值，通过自定义逻辑将值再写入各个基础的监控属性上。
3.owner — 可选，如果声明，它就是KO调用read或write的callback时用到的this。
Value转换器
有时候你可能需要显示一些不同格式的数据，从基础的数据转化成显示格式。比如，你存储价格为float类型，但是允许用户编辑的字段需要支持货币单位和小数点。你可以用可写的依赖监控属性来实现，然后解析传入的数据到基本 float类型里：
viewModel.formattedPrice=ko.dependentObservable({ read:function () { return "$" + this.price().toFixed(2); }, write:function(value) { value = parseFloat(value.replace(/[^\.\d]/g, "")); this.price(isNaN(value) ? 0 : value); }, owner:viewModel }); 然后绑定到textbox上面
Enter bid price:
所以，不管用户什么时候输入新价格，输入什么格式，text box里会自动更新为带有2位小数点和货币符号的数值。这样用户可以看到你的程序有多聪明，来告诉用户只能输入2位小数，否则的话自动删除多余的位数，当然也不能输入负数，因为write的callback函数会自动删除负号。
过滤并验证用户输入
继续在上面的ViewModel中添加两个属性
var viewModel = { firstName: ko.observable("aehyok"), lastName: ko.observable("Leo"), price: ko.observable(22.466), acceptedNumericValue: ko.observable(123), lastInputWasValid: ko.observable(true) }; 然后添加一个依赖监控属性
viewModel.attemptedValue = ko.dependentObservable({ read: viewModel.acceptedNumericValue, write: function (value) { if (isNaN(value)) { this.lastInputWasValid(false); } else { this.lastInputWasValid(true); this.acceptedNumericValue(value); } }, owner:viewModel }); 进行绑定View视图界面元素
Enter a numeric value:
That's not a number!
现在，acceptedNumericValue 将只接受数字，其它任何输入的值都会触发显示验证信息，而会更新acceptedNumericValue。
导航