快捷導(dǎo)航

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

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

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

1.簡(jiǎn)單舉例

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

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

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

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

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

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

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

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

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

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

默認(rèn)情況下，是按照字符排序（如果是字符）或者數(shù)字排序（如果是數(shù)字）。
你可以排序傳入一個(gè)排序函數(shù)進(jìn)行排序，該排序函數(shù)需要接受2個(gè)參數(shù)（代表該數(shù)組里需要比較的項(xiàng)），如果第一個(gè)項(xiàng)小于第二個(gè)項(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ù)組對(duì)象元素。例如myObservableArray.splice(1, 3) 從索引1開始刪除3個(gè)元素（第2,3,4個(gè)元素）然后將這些元素作為一個(gè)數(shù)組對(duì)象返回。
更多observableArray 函數(shù)的信息，請(qǐng)參考等價(jià)的JavaScript數(shù)組標(biāo)準(zhǔn)函數(shù)。
7.remove和removeAll

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

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

您可能感興趣的文章: