首頁 > web前端 > js教程 > 主體

Knockout數組(observable)使用詳解範例_基礎知識

WBOY
發布: 2016-05-16 17:15:08
原創
1454 人瀏覽過
1.簡單舉例
複製程式碼 程式碼如下:


程式碼如下:


    var myObservableArray = ko.observableArray();  ///初始化一個空的陣列
    myObservableArray.push("Some Value");    myObservableArray.push("Some Value");    myObservableArray.push("Some Value");     


2.關鍵點:監控陣列追蹤的是陣列裡的對象,而不是這些對象本身的狀態。
簡單說,將一物件放在observableArray 裡不會使這個物件本身的屬性變化可監控的。當然你自己也可以宣告這個物件的屬性為observable的,但它就成了一個依賴監控對象了。一個observableArray 僅僅監控他擁有的對象,並在這些對象添加或刪除的時候發出通知。

3.預先載入一個監控數組observableArray
如果你想讓你的監控數組在開始的時候就有一些初始值,那麼在聲明的時候,你可以在構造器裡加入這些初始物件。例如:複製程式碼

程式碼如下:


var anotherObservables

var anotherObservables

var anotherObservables

var anotherObservablesvar anotherObservables        { name: "Bungle", type: "Bear" },        { name: "George", type: "Hippo" },
不>    ]);



4.從observableArray裡讀訊息

一個observableArray其實就是一個observable的監控對象,只不過他的值是一個陣列(observableArray還加了很多其他特性,稍後再介紹)。所以你可以像取得普通的observable的值一樣,只需要呼叫無參函數就可以取得自身的值了。 例如,你可以像下面這樣取得它的值:



複製程式碼

程式碼如下:

程式碼如下:


alert('The length of the array is ' myObservableArray().length);
alert('The first element is ' myObservableArray()[0]);理論上你可以使用任何原生的JavaScript數組函數來操作這些數組,但是KO提供了更好的功能等價函數,他們非常有用是因為:A:相容於所有瀏覽器。 (例如indexOf不能在IE8和早期版本上使用,但KO自己的indexOf 可以在所有瀏覽器上使用)B:在數組操作函數方面(例如push和splice),KO自己的方式可以自動觸發依賴跟踪,並且通知所有的訂閱者它的變化,然後讓UI介面也相應的自動更新。 C:語法比較方便,呼叫KO的push方法,只需要這樣寫:myObservableArray.push(...)。 例如原生數組的myObservableArray().push(...)好用多了。
5.IndexOf和slice

indexOf 函數傳回的是第一個等於你參數陣列項目的索引。例如:myObservableArray.indexOf('Blah')將會傳回以0為第一個索引的第一個等於Blah的陣列項目的索引。如果沒有找到相等的,將返回-1。  
slice函數是observableArray相對於JavaScript 原生函數slice的等價函數(傳回給定的從開始索引到結束索引之間所有的物件集合)。 呼叫myObservableArray.slice(...)等價於呼叫JavaScript原生函數(例如:myObservableArray().slice(...))。

6.操作observableArray

observableArray 展現的是數組物件相似的函數並通知訂閱者的功能。
pop, push, shift, unshift, reverse, sort, splice所有這些函數都是和JavaScript數組原生函數等價的,唯一不同的數組改變可以通知訂閱者:複製程式碼 程式碼如下:myObservableArray.push('Some new value');/// 在陣列末尾新增一個新項目myObservableArray.pop();// 刪除陣列最後一項並傳回該項目myObservableArray.unshift('Some new value');// 在陣列頭部新增一個項目myObservableArray.shift ();// 刪除陣列頭部第一項並傳回該項目myObservableArray.reverse();// 翻轉整個陣列的順序myObservableArray.sort();// 給陣列排序
預設情況下,是依照字元排序(如果是字元)或數字排序(如果是數字)。
   你可以排序傳入一個排序函數進行排序,該排序函數需要接受2個參數(代表該數組裡需要比較的項),如果第一個項小於第二個項,返回-1,大於則返回1,等於返回0。例如:用lastname對person排序,可以這樣寫:
複製程式碼 程式碼如下:


程式碼如下:


    myObservableArray.sort(
        function(left, right) {
            return left.lastName== left. 🎜>        }) ;
 
myObservableArray.splice() 刪除指定開始索引和指定數目的陣列物件元素。例如myObservableArray.splice(1, 3) 從索引1開始刪除3個元素(第2,3,4個元素)然後將這些元素作為一個陣列物件傳回。 更多observableArray 函數的信息,請參考等價的JavaScript數組標準函數。 7.remove和removeAll
複製程式碼


程式碼如下:myObservableArray.remove(someItem);// 刪除所有等於someItem的元素並將被刪除元素作為一個陣列返回
myObservableArray.remove(function (item) { return item.age
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板