初学knockoutjs记录2——Observables监控属性（2 Observable Arrays 监控数组）

标签：

1 Observable Arrays 监控数组

　　如果你想要监测和响应某个对象的变化，你应该使用Observable监控属性；如果你想要监测和响应一个对象集合的变化，那么请使用ObservableArray监控数组，这在很多场景下都很有用，例如当你要呈现或编辑多个值时，当你需要像列表项添加或移除一样处理UI上多个重复片段时。

　　例如

var myObservableArry = ko.observableArray();  // Initally an empty array
myObservableArray.push(‘Some value‘);            // Adds the value and notifies observers

　　来看看你怎样绑定监控数组到UI上并让用户能够使用它，看下边这个简单的列表的例子，在这个例子中将演示如何绑定数组

　　注意“Add”按钮只有在你已经有输入时才会可用，查看HTML源代码来了解怎么使用“enable”绑定　

　　View 的代码

<form 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>

　　View Model 的代码

var SimpleListModel = function(items) {
    this.items = ko.observableArray(items);
    this.itemToAdd = ko.observable("");
    this.addItem = function() {
        if (this.itemToAdd() != "") {
            this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
            this.itemToAdd(""); // Clears the text box, because it‘s bound to the "itemToAdd" observable
        }
    }.bind(this);  // Ensure that "this" is always this view model
};
 
ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));

　　Key Point: 监控数组跟踪监控的是数组中的对象，而不是这些对象的状态

　　　　单纯放入一个对象到监控数组中并不会导致对象自己本身的属性被监控。当然，如果你希望你也可以监控这些个属性，但那就是另外的监控了。一个监控数组仅仅跟踪它所持有的对象，并在这些对象被添加或移除是通知监听者。

　　Prepopulating and observableArray 预加载一个监控数组

　　　　如果你不希望你的监控数组一开始就是空的，而是包含初始的一些初始对象时，你需要把这些对象作为一个数据传入到它的构造器中，例如

// This observable array initially contains three objects
var anotherObservableArray = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]);

　　Reading information from an observableArray 读取监控数组的数据

　　　　在幕后，一个监控数组实际上就是一个监控属性，而这个监控属性的值是一个数组（给监控数组额外添加了一些有用的特性）。因此，你可以像其他监控属性一样，调用监控数组的无参函数以获取它的底层数组值，然后就可以从这个数组中读取数据，例如

alert(‘The length of the array is ‘ + myObservableArray().length);
alert(‘The first element is ‘ + myObservableArray()[0]);

　　　　技术上来说，你可以使用任何原声的javascript数组函数去操作它的底层数组，但是通常情况后边介绍的这些选择更好一些，KO的监控数组有它自己的更有用的等效函数，因为：

　　　　1. 它们可以在所有浏览器上使用，兼容性好（例如，IE8及更早版本不支持原声的javascript的 indexOf 函数， 但是KO的 indexOf 可以在任何地方使用）

　　　　2. 在操作数组的函数方面，比如 push 和 splice, KO方法的“自动触发依赖跟踪机制”可以在数据改变时让所有订阅者得到通知，并且自动的更新UI元素

　　　　3. 它的语法更便捷，例如调用KO的push方法，只需要写 myObservableArry.push(...),这比调用底层数组的push写法 myObservableArray().push(...)稍微好一些

　　以下介绍一些监控数组的操作方法

　　indexOf

　　　　indexOf函数返回等于你的参数的第一个数组项的索引。例如， myObservableArray.indexOf(‘Blah‘) 将返回第一个等于‘Blah’的数组项的基于0的索引，找不到相等的数组项时返回-1

　　slice

　　　　监控数据的slice函数等效于javascript原声slice函数（也就说，它返回给定开始和结束索引的数组项目），调用myObservableArray.slice(...)等效于调用底层数组的同名方法myObservableArray().slice(...)

　　Manipulating an 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() 对数组进行排序

　　　　　　默认的排序顺是字符排序（字符型）或者数字排序（数字型），你也可以传入自定义的排序函数，你的需要接收两个参数（数组中的两个对象）并当第一个值小时返回负数，第一个值大时返回正数，相等时返回0。例如，以 last name 给一个 ‘person’ 对象的数据排序是，写法如下

myObservableArray.sort(function(left, right) {
   return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1)
})

　　　　myObservableArry.splice() 从指定的起始索引处移除指定数量的数组元素,并将移除的元素作为一个数组返回。例如，myObservableArray.splice(1,3)将从索引1开始移除3个元素（也就是说，第2，3，4个元素）并将它们以一个数组返回

　　　　查看更多监控数组函数的细节，请参照等效的官网文档 standard javascript array functions 

　　　　remove and removeall

初学knockoutjs记录2——Observables监控属性（2 Observable Arrays 监控数组）

标签：

原文地址：http://www.cnblogs.com/petunsecn/p/4903158.html