Knockout.js(二)：監控數組屬性（Observables Arrays）

　　若是想發現並響應一個對象的變化，就應該使用監控屬性（observables），若是想發現並響應一個集合的變化，就須要使用監控屬性數組（observableArray）。在不少狀況下，它都很是有用，好比你要在UI上須要顯示/編輯的一個列表數據集合，而後對集合進行添加和刪除。

 

　　聲明ObservableArray 

var myObservableArray = ko.observableArray();
myObservableArray.push("some value");

　　將一個對象放在observableArray裏不會使這個對象自己的屬性變化可監控，observable只會監控它擁有的對象，並在這些對象添加或刪除的時候發出通知。

　　若是想在初始化數組的時候給其賦初值，能夠在構造器里加入這些初始對象。

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

　　一個observableArray其實就是一個observable的監控對象，只不過他的值是一個數組，能夠用JavaScript的數組函數進行數組的訪問：

alert('The length of the array is ' + myObservableArray().length);    //The length of the array is 1
alert('The first element is ' + myObservableArray()[0]);              //The first element is some value
alert('The length of the array is ' + anotherObservableArray().length);    //The length of the array is 3
alert('The first element is ' + anotherObservableArray()[0]);              //The first element is [object Object]

 

　　ObservableArray的經常使用方法

　　能夠觀察到上面訪問數組的時候，使用的是JavaScript的函數，但KO提供了更好的功能等價函數，有如下優勢：

　　♦ 兼容全部瀏覽器。

　　♦ 在數組操做函數方面（如push和splice等），KO能夠自動觸發依賴跟蹤，並通知全部的訂閱者它的變化，而後讓UI界面相應地自動更新。

　　♦ 語法更方便（如myObservableArray.push(...)比myObservableArray().push(...)來的方便吧？？）

　　1.indexOf()

　　　　myObservableArray.indexOf('Blah')：返回以0爲第一個索引的第一個Blah的匹配項的索引

　　2.slice()

　　　　myObservableArray.slice(...)：返回給定的從開始索引到結束索引之間全部的對象集合

　　3.push()

　　　　myObservableArray.push(‘some new value’)：在數組末尾添加一個新項

　　4.pop()

　　　　myObservableArray.pop()：刪除數組最後一項並返回返回該項

　　5.unshift()

　　　　myObservableArray.unshift(‘some new value’)：在數組頭部添加一個項

　　6.shift()

　　　　myObservableArray.shift()：刪除數組頭部第一項並返回該項

　　7.reverse()

　　　　myObservableArray.reverse()：翻轉整個數組的順序

　　8.sort()

　　　　myObservableArray.sort()：給數組排序

　　9.splice()

　　　　myObservableArray.splice(1,3)：刪除指定開始索引"1"和指定數目"3"的數組對象元素（第2,3,4個元素）。

　　10.remove和removeAll

　　　　myObservableArray.remove(someItem); // 刪除全部等於someItem的元素並將被刪除元素做爲一個數組返回
　　　　myObservableArray.remove(function(item) { return item.age < 18 }); // 刪除全部age屬性小於18的元素並將被刪除元素做爲一個數組返回
　　　　myObservableArray.removeAll(['Chad', 132, undefined]); // 刪除全部等於'Chad', 123, or undefined的元素並將被刪除元素做爲一個數組返回

　　11.destroy和destroyAll

　　　　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　　　

　　在KO render一個foreach模板的時候，會自動隱藏帶有_destroy屬性而且值爲true的元素。 　　因此若是你的"delete」按鈕調用destroy(someItem) 方法的話，UI界面上的相對應的元素將自動隱藏，而後等你提交這個JSON對象到Rails上的時候，這個元素項將從數據庫刪除（同時其它的元素項將正常的插入或者更新）。