（初）Knockout 监控属性(Observables)
1 创建带有监控属性的view model1.1 ObservablesKnockout是在下面三个核心功能是建立起来的：
1.2 MVVM and View ModelsModel-View-View Model (MVVM) 是一种创建用户界面的设计模式。 描述的是如何将复杂的UI用户界面分成3个部分：
使用KO的时候，你的view就是你带有绑定信息的HTML文档，这些声明式的绑定管理到你的view model上。或者你可以使用模板从你的view model获取数据生成HTML。 创建一个view model，只需要声明任意的JavaScript object。例如： var myViewModel = {
personName: 'Bob',personAge: 123
};
你可以为view model创建一个声明式绑定的简单view。例如：下面的代码显示personName 值： The name is <span data-bind="text: personName"></span> 1.3 Activating Knockoutdata-bind属性尽快好用但它不是HTML的原生属性（它严格遵从HTML5语法， 虽然HTML4验证器提示有不可识别的属性但依然可用）。由于浏览器不识别它是什么意思，所以你需要激活Knockout 来让他起作用。 激活Knockout，需要添加如下的 ko.applyBindings(myViewModel); 你可以将这个代码块放在HTML底部，或者放在jQuery的$函数或者ready 函数里，然后放在页面上面,最终生成结果就是如下的HTML代码： The name is <span>Bob</span> 你可能奇怪ko.applyBindings使用的是什么样的参数,
现在已经知道如何创建一个简单的view model并且通过binding显示它的属性了。但是KO一个重要的功能是当你的view model改变的时候能自动更新你的界面。当你的view model部分改变的时候KO是如何知道的呢？答案是：你需要将你的model属性声明成observable的,因为它是非常特殊的JavaScript objects，能够通知订阅者它的改变以及自动探测到相关的依赖。 例如：将上述例子的view model改成如下代码： var myViewModel = {
personName: ko.observable('Bob'),personAge: ko.observable(123)
};
你根本不需要修改view – 所有的data-bind语法依然工作，不同的是他能监控到变化，当值改变时，view会自动更新。 1.4 监控属性（observables）的读和写不是所有的浏览器都支持JavaScript的 getters and setters (比如IE),，所以为了兼容性，使用ko.observable监控的对象都是真实的function函数。
当然调用 1.5 监控属性（Observables）的显式订阅通常情况下，你不用手工订阅，所以新手可以忽略此小节。高级用户，如果你要注册自己的订阅到监控属性（observables），你可以调用它的subscribe 函数。例如： myViewModel.personName.subscribe(function (newValue) {
alert("The person's new name is " + newValue);
});
这个subscribe 函数在内部很多地方都用到的。你也可以终止自己的订阅：首先得到你的订阅，然后调用这个对象的dispose函数，例如： var subscription = myViewModel.personName.subscribe(function (newValue) { /* do stuff */ });
// ...then later...
subscription.dispose(); // I no longer want notifications
大多数情况下，你不需要做这些，因为内置的绑定和模板系统已经帮你做好很多事情了，可以直接使用它们。 2 使用依赖监控属性(Dependent Observables)如果你已经有了监控属性firstName和lastName，你想显示全称怎么办？ 这就需要用到依赖监控属性了 – 这些函数是一个或多个监控属性， 如果他们的依赖对象改变，他们会自动跟着改变。 例如，下面的view model, var viewModel = {
firstName: ko.observable('Bob'),lastName: ko.observable('Smith')
};
… 你可以添加一个依赖监控属性来返回姓名全称： viewModel.fullName = ko.dependentObservable(function () {
return this.firstName() + " " + this.lastName();
},viewModel);
并且绑定到UI的元素上，例如： The name is <span data-bind="text: fullName"></span> … 不管firstName还是lastName改变，全称fullName都会自动更新（不管谁改变，执行函数都会调用一次，不管改变成什么，他的值都会更新到UI或者其他依赖监控属性上）。 完整代码： <body>
<!-- text 绑定注册到自身 -->
The name is <span data-bind="text: fullName"></span>
</body>
<script src="../js/knockout-3.5.0rc2.debug.js"></script>
<script>
var viewModel = {
firstName: ko.observable("Bob"),lastName: ko.observable("Smith")
};
// 依赖监控属性(Dependent Observables)
// 这些函数是一个或多个监控属性， 如果他们的依赖对象改变，他们会自动跟着改变。
//computed == dependentObservable
viewModel.fullName = ko.dependentObservable(function() {
return this.firstName() + " " + this.lastName();
},viewModel);
ko.applyBindings(viewModel);
</script>
3 使用observable数组如果你要探测和响应一个对象的变化，你应该用observables。如果你需要探测和响应一个集合对象的变化，你应该用observableArray 。在很多场景下，它都非常有用，比如你要在UI上需要显示/编辑的一个列表数据集合，然后对集合进行添加和删除。 var myObservableArray = ko.observableArray(); // Initially an empty array
myObservableArray.push('Some value'); // Adds the value and notifies observers
关键点：监控数组跟踪的是数组里的对象，而不是这些对象自身的状态。简单说，将一对象放在observableArray 里不会使这个对象本身的属性变化可监控的。当然你自己也可以声明这个对象的属性为observable的，但它就成了一个依赖监控对象了。一个observableArray 仅仅监控他拥有的对象，并在这些对象添加或者删除的时候发出通知。 预加载一个监控数组observableArray如果你想让你的监控数组在开始的时候就有一些初始值，那么在声明的时候，你可以在构造器里加入这些初始对象。例如： // This observable array initially contains three objects
var anotherObservableArray = ko.observableArray([
{ name: "Bungle",type: "Bear" },{ name: "George",type: "Hippo" },{ name: "Zippy",type: "Unknown" }
]);
从observableArray里读取信息一个observableArray其实就是一个observable的监控对象，只不过他的值是一个数组（observableArray还加了很多其他特性，稍后介绍）。所以你可以像获取普通的observable的值一样，只需要调用无参函数就可以获取自身的值了。 例如，你可以像下面这样获取它的值： alert('The length of the array is ' + myObservableArray().length);
alert('The first element is ' + myObservableArray()[0]);
理论上你可以使用任何原生的JavaScript数组函数来操作这些数组，但是KO提供了更好的功能等价函数，他们非常有用是因为： 1.兼容所有浏览器。（例如indexOf不能在IE8和早期版本上使用，但KO自己的indexOf 可以在所有浏览器上使用） 2.在数组操作函数方面（例如push和splice），KO自己的方式可以自动触发依赖跟踪，并且通知所有的订阅者它的变化，然后让UI界面也相应的自动更新。 3.语法更方便，调用KO的push方法，只需要这样写：myObservableArray.push(...)。 比如原生数组的myObservableArray().push(...)好用多了。 下面讲解的均是observableArray的读取和写入的相关函数。
## 操作observableArray pop,push,shift,unshift,reverse,sort,splice所有这些函数都是和JavaScript数组原生函数等价的，唯一不同的数组改变可以通知订阅者：
默认情况下，是按照字符排序（如果是字符）或者数字排序（如果是数字）。 你可以排序传入一个排序函数进行排序，该排序函数需要接受2个参数（代表该数组里需要比较的项），如果第一个项小于第二个项，返回-1，大于则返回1，等于返回0。例如：用lastname给person排序，你可以这样写：
更多observableArray 函数的信息，请参考等价的JavaScript数组标准函数。 remove和removeAllobservableArray 添加了一些JavaScript数组默认没有但非常有用的函数：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
