快捷導(dǎo)航

Knockout數(shù)組(observable)使用詳解示例

更新時間：2013年11月15日 09:37:54 作者：

本文通過示例詳細(xì)說明了Knockout數(shù)組(observable)的使用方法，如從observableArray里讀取信息、操作observableArray

1.簡單舉例

<script type="text/javascript">
    var myObservableArray = ko.observableArray();  ///初始化一個空的數(shù)組
    myObservableArray.push("Some Value");          ///向數(shù)組中添加一個項(xiàng)
</script>

2.關(guān)鍵點(diǎn)：監(jiān)控數(shù)組跟蹤的是數(shù)組里的對象，而不是這些對象自身的狀態(tài)。
簡單說，將一對象放在observableArray 里不會使這個對象本身的屬性變化可監(jiān)控的。當(dāng)然你自己也可以聲明這個對象的屬性為observable的，但它就成了一個依賴監(jiān)控對象了。一個observableArray 僅僅監(jiān)控他擁有的對象，并在這些對象添加或者刪除的時候發(fā)出通知。
3.預(yù)加載一個監(jiān)控數(shù)組observableArray
如果你想讓你的監(jiān)控數(shù)組在開始的時候就有一些初始值，那么在聲明的時候，你可以在構(gòu)造器里加入這些初始對象。例如：

復(fù)制代碼代碼如下:

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

4.從observableArray里讀取信息
一個observableArray其實(shí)就是一個observable的監(jiān)控對象，只不過他的值是一個數(shù)組（observableArray還加了很多其他特性，稍后介紹）。所以你可以像獲取普通的observable的值一樣，只需要調(diào)用無參函數(shù)就可以獲取自身的值了。例如，你可以像下面這樣獲取它的值：

復(fù)制代碼代碼如下:

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

理論上你可以使用任何原生的JavaScript數(shù)組函數(shù)來操作這些數(shù)組，但是KO提供了更好的功能等價函數(shù)，他們非常有用是因?yàn)椋?BR>A:兼容所有瀏覽器。（例如indexOf不能在IE8和早期版本上使用，但KO自己的indexOf 可以在所有瀏覽器上使用）
B:在數(shù)組操作函數(shù)方面（例如push和splice），KO自己的方式可以自動觸發(fā)依賴跟蹤，并且通知所有的訂閱者它的變化，然后讓UI界面也相應(yīng)的自動更新。
C：語法更方便，調(diào)用KO的push方法，只需要這樣寫：myObservableArray.push(...)。比如原生數(shù)組的myObservableArray().push(...)好用多了。
5.IndexOf和slice
indexOf 函數(shù)返回的是第一個等于你參數(shù)數(shù)組項(xiàng)的索引。例如：myObservableArray.indexOf('Blah')將返回以0為第一個索引的第一個等于Blah的數(shù)組項(xiàng)的索引。如果沒有找到相等的，將返回-1?！　?BR>slice函數(shù)是observableArray相對于JavaScript 原生函數(shù)slice的等價函數(shù)（返回給定的從開始索引到結(jié)束索引之間所有的對象集合）。調(diào)用myObservableArray.slice(...)等價于調(diào)用JavaScript原生函數(shù)（例如：myObservableArray().slice(...)）。
6.操作observableArray
observableArray 展現(xiàn)的是數(shù)組對象相似的函數(shù)并通知訂閱者的功能。
pop, push, shift, unshift, reverse, sort, splice
所有這些函數(shù)都是和JavaScript數(shù)組原生函數(shù)等價的，唯一不同的數(shù)組改變可以通知訂閱者：

復(fù)制代碼代碼如下:

myObservableArray.push('Some new value');// 在數(shù)組末尾添加一個新項(xiàng)
myObservableArray.pop();// 刪除數(shù)組最后一個項(xiàng)并返回該項(xiàng)
myObservableArray.unshift('Some new value');// 在數(shù)組頭部添加一個項(xiàng)
myObservableArray.shift();// 刪除數(shù)組頭部第一項(xiàng)并返回該項(xiàng)
myObservableArray.reverse();// 翻轉(zhuǎn)整個數(shù)組的順序
myObservableArray.sort();// 給數(shù)組排序

默認(rèn)情況下，是按照字符排序（如果是字符）或者數(shù)字排序（如果是數(shù)字）。
你可以排序傳入一個排序函數(shù)進(jìn)行排序，該排序函數(shù)需要接受2個參數(shù)（代表該數(shù)組里需要比較的項(xiàng)），如果第一個項(xiàng)小于第二個項(xiàng)，返回-1，大于則返回1，等于返回0。例如：用lastname給person排序，你可以這樣寫：

復(fù)制代碼代碼如下:

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

myObservableArray.splice() 刪除指定開始索引和指定數(shù)目的數(shù)組對象元素。例如myObservableArray.splice(1, 3) 從索引1開始刪除3個元素（第2,3,4個元素）然后將這些元素作為一個數(shù)組對象返回。
更多observableArray 函數(shù)的信息，請參考等價的JavaScript數(shù)組標(biāo)準(zhǔn)函數(shù)。
7.remove和removeAll

復(fù)制代碼代碼如下:

observableArray 添加了一些JavaScript數(shù)組默認(rèn)沒有但非常有用的函數(shù)：
myObservableArray.remove(someItem);// 刪除所有等于someItem的元素并將被刪除元素作為一個數(shù)組返回
myObservableArray.remove(function (item) { return item.age < 18;}) ;//刪除所有age屬性小于18的元素并將被刪除元素作為一個數(shù)組返回

您可能感興趣的文章: