Knockoutjs官網翻譯系列（二） Observable 數組

      承接前文，前文書說道了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、12三、undefined的元素並將它們做爲數組返回。
• removeAll() —刪除全部元素一個不留。

延遲更新通知 

一般,一個observableArray內的元素髮生改變時（增刪排序）會當即向它的訂閱者們發送通知。可是若是這個observableArray會屢次重複出現，或者更新會很耗時的時候你可能會但願經過延遲通知的時間間隔來獲取更好的性能體驗，可使用rateLimitextender 來完成:

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

好啦，咱們下節見啦。