Knockout 新版应用开发教程之Observable Arrays

假如你想到侦测和相应一个对象的改变，假如你想要侦测和响应一一组合集的改变，就要用observableArray

在许多场景都是很有用的，比如你要在UI上需要显示/编辑的一个列表数据集合，然后对集合进行添加和删除。

Example

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

去看下怎么能绑定observableArray到UI并且允许使用者修改它，看the simple list example.

关键点：监控数组跟踪的是数组里的对象，而不是这些对象自身的状态。

简而言之,将一对象放在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的 observableArray 有一些等价的函数来处理本身，他们非常的有用是因为：

1. 他们工作在所有的游览器（例如，原生代码indexOf函数，不能在IE8及其早期的版本上使用，但是KO的indexOf能够兼容）
2. 在数组操作函数方面（例如push和splice），KO自己的方式可以自动触发依赖跟踪，并且通知所有的订阅者它的变化，然后让UI界面也相应的自动更新。
3. 语法更方便，调用KO的push方法，只需要这样写：myObservableArray.push(...)。 比如原生数组的myObservableArray().push(...)好用多了。

下面讲解的均是observableArray的读取和写入的相关函数。

indexOf

indexOf 函数返回的是第一个等于你参数数组项的索引。

例如：myObservableArray.indexOf('Blah')将返回以0为第一个索引的第一个等于Blah的数组项的索引。如果没有找到相等的，将返回-1。

slice

slice函数是observableArray相对于JavaScript 原生函数slice的等价函数（返回给定的从开始索引到结束索引之间所有的对象集合）。

调用myObservableArray.slice(...)等价于调用JavaScript原生函数（例如：myObservableArray().slice(...)）。

Manipulating an observableArray

操作一个监控数组

observableArray 展现的是数组对象相似的函数并通知订阅者的功能。

pop, push, shift, unshift, reverse, sort, splice

所有的这些函数相当于原生代码，并且数组改变可以通知订阅者：

• 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数组标准函数。

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的元素并将被删除元素作为一个数组返回

destroy and destroyAll (Note: Usually relevant to Ruby on Rails developers only)

destroy和destroyAll函数是为Ruby on Rails开发者方便使用为开发的：

• myObservableArray.destroy(someItem) 找出所有等于someItem的元素并给他们添加一个属性_destroy，并赋值为true
• myObservableArray.destroy(function(someItem) { return someItem.age < 18 }) 找出所有age属性小于18的元素并给他们添加一个属性_destroy，并赋值为true
• myObservableArray.destroyAll(['Chad', 132, undefined]) 找出所有等于'Chad', 123, 或undefined 的元素并给他们添加一个属性_destroy，并赋值为true

那么，_destroy是做什么用的？正如我提到的，这只是为Rails 开发者准备的。在Rails 开发过程中，如果你传入一个JSON对象，Rails 框架会自动转换成ActiveRecord对象并且保存到数据库。Rails 框架知道哪些对象以及在数据库中存在，哪些需要添加或更新， 标记_destroy为true就是告诉框架删除这条记录。

注意的是：在KO render一个foreach模板的时候，会自动隐藏带有_destroy属性并且值为true的元素。所以如果你的“delete”按钮调用destroy(someItem) 方法的话，UI界面上的相对应的元素将自动隐藏，然后等你提交这个JSON对象到Rails上的时候，这个元素项将从数据库删除（同时其它的元素项将正常的插入或者更新）

转载于:https://www.cnblogs.com/aaronjs/p/3191380.html