Knockout Observable Array（監控陣列）

Observable Array(監控陣列)的作用

列表操作是經常會遇到的一個場景，使用監控陣列，你可以：

• 儲存列表物件，並且使用Ko提供的豐富的API操作列表元素(支援內建js Array的方法，以及ko自己新增的方法:remove,removeAll等)
• 監控陣列元素個數的變化，並且自動通知外部。如果與UI繫結，則自動更新UI

Observable Array與js內建Array區別

Observable Array是ko物件，內部包裝了Array物件，而後者僅僅是一個Array物件 。
前者可以跟蹤陣列個數變化，後者不能
前者可以使用js內建陣列物件的方法+ko擴充套件的API來運算元據，後者只能使用js內建陣列物件提供的方法運算元據

Observable Array注意事項

這裡需要單獨提示一點對Observable Array理解可能出現偏差的地方：

Observable Array**不監控元素本身的變化**：Observable Array只處理元素個數的變化，比如陣列元素刪除和新增。元素自身的變化是否能自動監控，取決於元素本身是普通物件還是Observable物件。
如何既監控陣列元素個數，又監控元素內容變化：往陣列中push元素的時候，使用observable元素即可，則該元素可以自動監控自身的變化。

例項講解：Observable Array

基本語法

1、定義

var myObservableArray = ko.observableArray();    //建立一個監控陣列
myObservableArray.push('Some value');  //使用push方法新增陣列元素

var anotherObservableArray = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]);//可以在建立監控陣列的同時初始化陣列

2、讀取

alert('The length of the array is ' + myObservableArray().length);//使用()號讀取陣列元素，然後就可以隨意操作JS  Array物件的屬性
alert('The first element is ' + myObservableArray()[0]);//讀取第一個元素

3、寫入

var a =ko.observableArray(['1','2'])//初始化的時候寫入值
a(['3','4']);//使用(value)方式重新寫入資料，現在a()=['3','4']

4、訂閱陣列元素個數變化事件

var myObservableArray = ko.observableArray();  

myObservableArray.subscribe(function (newVal) {
        alert(newVal.length);
        alert(newVal[0]);
    });//訂閱陣列元素變化事件，newVal將會傳入變化後的陣列物件

myObservableArray.push('1');//push一個新元素進去，會alert一個長度，和'1'

5、ko擴充套件的陣列API

var myObservableArray = ko.observableArray(["item1", "item2", "item3", "item4", "item5", "item6", "7", "8"]);  //構建監控陣列

myObservableArray.remove("item1");//移除item1
myObservableArray.remove(function (item) {
            return item.length < 4;//只有長度小於4的元素被移除
        });//移除 "7", "8"
myObservableArray.removeAll(["item2", "item3"]);//移除item2，item3
myObservableArray.removeAll();//移除所有的