Knockoutjs官网翻译系列 Observable 数组

Posted 2020-07-26

      承接前文，前文书说道了KO框架中如何使用observable的视图模型属性来与UI元素进行绑定并自动进行双向更新的事儿。observable属性除了服务基础数据类型之外，还定义了专门为服务数组类型的observableArray。

     如果你想要监测并响应一个object类型的变化，那么你使用observables。如果你想监测并响应一个集合的变化，就使用observableArray。很多场景下你都会用到它，比如你要在UI上展现或者编辑一个列表内容，期中你会控制他们的展现啊，隐藏啊，添加啊，删除之类的时候，使用它吧。看看下面的demo如何定义：

 $(function () {
     var myObservableArray = ko.observableArray();    // 直接定义
     myObservableArray.push(‘Some value‘);
     
     var myViewModel = {
         names:ko.observableArray();                  //定义在视图模型对象中
　　　}
 });

     注意: 一个observableArray只监测和跟踪集合中的对象，并不监测和跟踪集合中对象的属性，直观来讲就是只关心内部元素的更新和删除以及排序等，并不关心对象属性是否发生变化。

     简单的把一个对象放入observableArray中不会让该对象的属性也变成observable。当然如果你想的话你可以将这些对象的属性定义成observable的，这就是另一回事儿了。 一个 observableArray 只是跟踪他们自己所包含的对象, 并且只会在对象增加或减少或排序的时候向监听器发送通知。

    observableArray的初始化

     如果你想让你的observableArray在一开始就有值，那么可以在构造函数中直接传入一个js数组，像下面这样：

 $(function () {
     var anotherObservableArray = ko.observableArray([
                { name: "Bungle", type: "Bear" },
                { name: "George", type: "Hippo" },
                { name: "Zippy", type: "Unknown" }
            ]);
     });

 

     读取observableArray信息

     其实在幕后一个observableArray实际上也是一个observable数据，只不过它的值是个数组(额外的,observableArray 添加了很多自己的特性)。所以你可以像方法一样调用它就能直接到里面的javascript数组，就像其他的observable的使用方式一样。然后就可以随意处理这个js数组了。举个例子：

$(function () {
    var anotherObservableArray = ko.observableArray([
        { name: "Bungle", type: "Bear" },
        { name: "George", type: "Hippo" },
        { name: "Zippy", type: "Unknown" }
    ]);

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

 

       从技术上来讲你可以使用任意的原生javascript数组中的方法来操作获取到的js数组，但是你也可以使用KO框架中为observableArray提供的一些等效方法来直接操作而无需转换为js数组，有时候这更有效率 ，因为：

1. 它们支持所有浏览器. (例如,原生的javascript数组中的indexOf方法不能在IE8或更早的浏览器版本中使用，但是KO中的indexOf就能完美支持。)
2. 其中有一些可以修改数组内容的方法比如 push和splice, 在KO中这些方法都自带自动触发和追踪机制，所以所有注册过的监听器一旦在数组内容发生变化的时候都能接收到通知，并且自动为你更新UI。
3. 语法上也非常简单. 比如调用KO的push方法, 只需要这么写myObservableArray.push(...)。这样的话比先取出原生数组再调用原生数组的push方法要简单。（复杂的写法：myObservableArray().push(...)）

      下面来看看它包含的一些常见方法：

indexOf

indexOf 方法返回参数所代表的数据在数组中的索引下表，如果找到多个则只返回第一个的索引。例如：myObservableArray.indexOf(‘Blah‘) 返回数组中第一个内容为Blash的元素所代表的下表，下表从0开始。如果没有找到的话则返回-1。

 

 

slice

slice方法等效于原声javascript数组中的slice方法 (返回从你指定的起始下标位置到终止下标位置内的所有元素)。

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

这些方法都等效于原声javascirpt数组中的方法，但是他们都会向监听器发送通知，因为他们都会改变数组中的元素，包括增删排序。

• push(value) — 添加一个新的元素到集合中。
• pop() —删除数组中的最后一个元素并返回。
• unshift( value ) — 在数组的开头插入一个新元素。
• shift() — 删除数组的第一个元素并返回。
• reverse() — 将数组中的所有元素顺序翻转并返回这个observableArray。
• sort() — 排序数组并返回排序后的observableArray。
• splice() — 从给定的起始索引位置删除指定数量的元素并返回这些删除的元素。示例：myObservableArray.splice(1, 3) 从位置1开始删除3个元素，并且将它们作为一个数组返回。

最后再说一下Sort:

默认的排序是按照字母进行排序的, 但是你可以传递一个函数来自定义排序规则。 你的函数需要提供两个参数，框架会将数组中的数据两两传递进去，如果你想让第一个元素排在前面，则返回一个负数,如果你想让第一个元素排在后面就返回一个正数，返回0的话相同的数据位置不变。举个例子, 通过last name排序一个 ‘person’ 集合 , 你可以这么写：myObservableArray.sort(function (left, right) { return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1) })

remove 与removeAll

observableArray 添加了更多有用的方法 ：

• remove( someItem ) — 删除所有与someItem相同的值，并将它们作为数组返回。
• remove( function (item) { return item.age < 18; } ) — 删除所有年龄小于18岁的元素，并将它们作为数组返回。
• removeAll( [‘Chad‘, 132, undefined] ) — 删除所有值为Chad、123、undefined的元素并将它们作为数组返回。
• removeAll() —删除所有元素一个不留。

延迟更新通知 

通常,一个observableArray内的元素发生改变时（增删排序）会立即向它的订阅者们发送通知。但是如果这个observableArray会多次重复出现，或者更新会很耗时的时候你可能会希望通过延迟通知的时间间隔来获取更好的性能体验，可以使用rateLimitextender 来完成:

myViewModel.myObservableArray.extend({ rateLimit: 50 });

好啦，我们下节见啦。