Knockout开发中文API系列4–监控属性数组

时间：2023-03-08 16:11:47

PS：这个翻译系列好久都没有更新了，实在是不应该，一方面是由于时间不多，另一方面也由于自身惰性太大，从今天起接着更新，会在最近的一月内把这个系列中文API文档翻译完整。

如果你想侦测并响应一个对象的变化，你需要使用observables。如果你想侦测并响应一个集合对象的变化，你需要使用observableArray。这在很多情况下，都显得非常有用，比如你想操作UI上的一组数据，控制其显示或编辑、添加或删除等。

示例

  1. var myObservableArray = ko.observableArray(); // Initially an empty array
  2. myObservableArray.push('Some value');

想详细看看observableArray 是如何绑定到UI上并允许用户修改它的话，请看示例。

关键点

一个监控数组observableArray 监视的数组里面的对象，而不是这些对象自身的状态

简单点说，将一个对象放入到observableArray 中，并不会监控这些对象本身的属性。当然，如果你愿意你可以监控这些对象的属性，但这就变成了依赖监控属性。一个observableArray 只跟踪其持有的对象，当其对象添加或移除的时候才通知监听者。

预加载observableArray

如果你希望你的监控数组开始的时候并不是空的，而是包含有一些初始项，那么在申明数组的时候可以在构造器中加入这些对象，例如：

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

从observableArray中读取信息

一个observableArray 数组其实就是一个observable监控对象，只不过这个对象是一个数组。所以你可以像获取普通JavaScript数组那样，通过无参的构造函数调用observableArray 获取其对象的值。你就可以通过下面的方式获取数组中的对象信息了。

示例：

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

从技术角度上讲，你可以使用任意的原生JavaScript数组函数进行底层操作，但是KO提供了更好的等价功能函数，它有以下几个有点：

  • 1. 它兼容所有的浏览器（例如：原生的JavaScript方式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(...)等价于调用myObservableArray.slice(...)方法。

操作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()对数组内容进行排序

默认情况下，按照字符（如果是字符串）或数字（如果是数字）顺序排序

另外，你也可以通过传入一个排序函数来对数组进行排序。这个排序函数需要接受两个参数（代表数组两个要比较的项），如果第一项小于第二项，则返回-1；大于返回1；等于返回0。

例如：使用lastname对Person对象进行排序，你可以这样写：

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

myObservableArray.splice()删除指定索引和指定数目的数组元素对象。例如：myObservableArray.splice(1, 3)从1开始删除3个元素，并将这3个元素作为元素数组返回。
想了解observableArray 更多的函数信息，可以参考标准JavaScript数组函数的文档。

remove and removeAll

observableArray 添加了许多非常有用但JavaScript数组默认没有的函数方法。

myObservableArray.remove(someItem) 删除所有值等于someItem 的数组项，并将删除元素作为一个数组返回

myObservableArray.remove(function(item) { return item.age < 18 })删除所有元素age 属性小于18的数组项，并将删除元素作为一个数组返回

myObservableArray.removeAll(['Chad', 132, undefined]) 删除所有值等于'Chad'、132、undefined的数组项，并将删除元素作为一个数组返回

myObservableArray.removeAll()删除所有的数组项，并将删除元素作为一个数组返回

destroy and destroyAll

（注：通常只和和Ruby on Rails开发者有关）

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'、132、undefined的数组元素对象，并给它们添加_destroy 的属性，赋值为true

myObservableArray.destroyAll()给所有的元素对象添加_destroy 的属性，赋值为true

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

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

相关文章