前言
1.创建一个ViewModel
<script type="text/javascript">
//1.创建一个ViewModel
var myViewModel = {
personName:'aehyok',
personAge:25
};
</script>
2.为ViewModel创建一个声明式绑定的简单的View
The name is <span data-bind="text:personName"></span>
3.激活Knockout
|
1
|
ko.applyBindings(myViewModel); |
4.查看运行效果
Observables监控属性
现在已经知道如何创建一个简单的view model并且通过binding显示它的属性了。但是KO一个重要的功能是当你的view model改变的时候能自动更新你的界面。当你的view model部分改变的时候KO是如何知道的呢？答案是：你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript objects，能够通知订阅者它的改变以及自动探测到相关的依赖。
例如：将上述的例子修改为
|
1
2
3
4
|
var myViewModel = {
personName: ko.observable('aehyok'),
personAge: ko.observable(25)
}; |
你根本不需要修改view – 所有的data-bind语法依然工作，不同的是他能监控到变化，当值改变时，view会自动更新。
监控属性的读操作（read）
|
1
2
|
///监控属性的读操作（read）alert(myViewModel.personAge); |
监控属性的写操作（write）
|
1
2
|
///监控属性的写操作（write）myViewModel.personName("aehyok-Test");
|
Dependent Observables依赖监控属性
如果你已经有了监控属性firstName和lastName，你想显示全称怎么办？ 这就需要用到依赖监控属性了 – 这些函数是一个或多个监控属性， 如果他们的依赖对象改变，他们会自动跟着改变。
例如：继续在上面的ViewModel中添加两个属性 firstName和lastName
|
1
2
3
4
5
6
|
var myViewModel = {
personName: ko.observable('aehyok'),
personAge: ko.observable(25),
firstName: ko.observable('aehyok'),
lastName: ko.observable('Leo')
}; |
并且添加一个依赖监控属性，来返回姓名的全称
|
1
2
3
4
|
///依赖监控属性myViewModel.fullName = ko.dependentObservable(function () { return this.firstName() + " " + this.lastName();
}, myViewModel); |
并且绑定到View视图界面上的元素
The fullname is <span data-bind="text: fullName"></span>
不管firstName还是lastName改变，全称fullName都会自动更新（不管谁改变，执行函数都会调用一次，不管改变成什么，他的值都会更新到UI或者其他依赖监控属性上）。
优化上面fullname的监控属性
|
1
2
3
4
|
var viewModel = {
firstName: ko.observable("aehyok"),
lastName:ko.observable("Leo")
}; |
对fullName的依赖监控属性进行调整
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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元素上，如下：
|
1
2
3
|
<p>First name: <span data-bind="text: firstName"></span></p>
<p>Last name: <span data-bind="text: lastName"></span></p>
<h2>Hello, <input data-bind="value: fullName"/>!</h2>
|
然后运行在文本框上录入会看到如下效果
上面的view model演示的是通过一个简单的参数来初始化依赖监控属性。你可以给下面的属性传入任何JavaScript对象：
1. read — 必选，一个用来执行取得依赖监控属性当前值的函数。
2.write — 可选，如果声明将使你的依赖监控属性可写，别的代码如果这个可写功能写入新值，通过自定义逻辑将值再写入各个基础的监控属性上。
3.owner — 可选，如果声明，它就是KO调用read或write的callback时用到的this。
Value转换器
有时候你可能需要显示一些不同格式的数据，从基础的数据转化成显示格式。比如，你存储价格为float类型，但是允许用户编辑的字段需要支持货币单位和小数点。你可以用可写的依赖监控属性来实现，然后解析传入的数据到基本 float类型里：
|
1
2
3
4
5
6
7
8
9
10
|
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上面
|
1
|
<p>Enter bid price: <input data-bind="value: formattedPrice"/></p>
|
所以，不管用户什么时候输入新价格，输入什么格式，text box里会自动更新为带有2位小数点和货币符号的数值。这样用户可以看到你的程序有多聪明，来告诉用户只能输入2位小数，否则的话自动删除多余的位数，当 然也不能输入负数，因为write的callback函数会自动删除负号。
过滤并验证用户输入
继续在上面的ViewModel中添加两个属性
|
1
2
3
4
5
6
7
|
var viewModel = {
firstName: ko.observable("aehyok"),
lastName: ko.observable("Leo"),
price: ko.observable(22.466),
acceptedNumericValue: ko.observable(123),
lastInputWasValid: ko.observable(true)
}; |
然后添加一个依赖监控属性
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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视图界面元素
|
1
2
|
<p>Enter a numeric value: <input data-bind="value: attemptedValue"/></p>
<div data-bind="visible: !lastInputWasValid()">That's not a number!</div>
|
现在，acceptedNumericValue 将只接受数字，其它任何输入的值都会触发显示验证信息，而会更新acceptedNumericValue。
前言
如果你要探测和响应一个对象的变化，你应该用observables。
如果你需要探测和响应一个集合对象的变化，你应该用observableArray 。
在很多场景下，它都非常有用，比如你要在UI上需要显示/编辑的一个列表数据集合，然后对集合进行添加和删除。
使用observables数组
1.简单举例
<script type="text/javascript">
var myObservableArray = ko.observableArray(); ///初始化一个空的数组
myObservableArray.push("Some Value"); ///向数组中添加一个项
</script>
2.关键点：监控数组跟踪的是数组里的对象，而不是这些对象自身的状态。
简单说，将一对象放在observableArray 里不会使这个对象本身的属性变化可监控的。当然你自己也可以声明这个对象的属性为observable的，但它就成了一个依赖监控对象了。一个 observableArray 仅仅监控他拥有的对象，并在这些对象添加或者删除的时候发出通知。
3.预加载一个监控数组observableArray
如果你想让你的监控数组在开始的时候就有一些初始值，那么在声明的时候，你可以在构造器里加入这些初始对象。例如：
var anotherObservableArray = ko.observableArray([
{ name: "Bungle", type: "Bear" },
{ name: "George", type: "Hippo" },
{ name: "Zippy", type: "Unknown" }
]);
4.从observableArray里读取信息
一个observableArray其实就是一个observable的监控对象，只不过他的值是一个数组（observableArray还加了 很多其他特性，稍后介绍）。所以你可以像获取普通的observable的值一样，只需要调用无参函数就可以获取自身的值了。 例如，你可以像下面这样获取它的值：
alert('The length of the array is ' + myObservableArray().length);
alert('The first element is ' + myObservableArray()[0]);
理论上你可以使用任何原生的JavaScript数组函数来操作这些数组，但是KO提供了更好的功能等价函数，他们非常有用是因为：
A:兼容所有浏览器。（例如indexOf不能在IE8和早期版本上使用，但KO自己的indexOf 可以在所有浏览器上使用）
B:在数组操作函数方面（例如push和splice），KO自己的方式可以自动触发依赖跟踪，并且通知所有的订阅者它的变化，然后让UI界面也相应的自动更新。
C：语法更方便，调用KO的push方法，只需要这样写：myObservableArray.push(...)。 比如原生数组的myObservableArray().push(...)好用多了。
5.IndexOf和slice
indexOf 函数返回的是第一个等于你参数数组项的索引。例如：myObservableArray.indexOf('Blah')将返回以0为第一个索引的第一个等于Blah的数组项的索引。如果没有找到相等的，将返回-1。
slice函数是observableArray相对于JavaScript 原生函数slice的等价函数（返回给定的从开始索引到结束索引之间所有的对象集合）。 调用myObservableArray.slice(...)等价于调用JavaScript原生函数（例 如：myObservableArray().slice(...)）。
6.操作observableArray
observableArray 展现的是数组对象相似的函数并通知订阅者的功能。
pop, push, shift, unshift, reverse, sort, splice
所有这些函数都是和JavaScript数组原生函数等价的，唯一不同的数组改变可以通知订阅者：
myObservableArray.push('Some new value');// 在数组末尾添加一个新项
myObservableArray.pop();// 删除数组最后一个项并返回该项
myObservableArray.unshift('Some new value');// 在数组头部添加一个项
myObservableArray.shift();// 删除数组头部第一项并返回该项
myObservableArray.reverse();// 翻转整个数组的顺序
myObservableArray.sort();// 给数组排序
默认情况下，是按照字符排序（如果是字符）或者数字排序（如果是数字）。
你可以排序传入一个排序函数进行排序，该排序函数需要接受2个参数（代表该数组里需要比较的项），如果第一个项小于第二个项，返回-1，大于则返回1，等于返回0。例如：用lastname给person排序，你可以这样写：
myObservableArray.sort(
function(left, right) {
return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1);
});
myObservableArray.splice() 删除指定开始索引和指定数目的数组对象元素。例如myObservableArray.splice(1, 3) 从索引1开始删除3个元素（第2,3,4个元素）然后将这些元素作为一个数组对象返回。
更多observableArray 函数的信息，请参考等价的JavaScript数组标准函数。
7.remove和removeAll
observableArray 添加了一些JavaScript数组默认没有但非常有用的函数：
myObservableArray.remove(someItem);// 删除所有等于someItem的元素并将被删除元素作为一个数组返回
myObservableArray.remove(function (item) { return item.age < 18;}) ;//删除所有age属性小于18的元素并将被删除元素作为一个数组返回
myObservableArray.removeAll(['Chad', 132, undefined]);//删除所有等于'Chad', 123, or undefined的元素并将被删除元素作为一个数组返回