監控屬性數組(Observables Arrays )


如果你想發現並響應一個對象的改變,就應該用監控屬性(observables)。如果你想發現並響應一個集合的變化,就該用監控屬性數組 (observableArray)。監控屬性數組在顯示或編輯多個值以及對界面的一部分重復顯示或隱藏(如添加刪除條目)等多種情況下 都是很有用的。

如果我們想要使用Knockoutjs表示多個值的話我們可以使用數組監控(Observable Arrays)來表示,形式如下:

var myObservableArray = ko.observableArray(); 
myObservableArray.push('Some value');myObservableArray.push('Some value'); 

在第一行我們實例化了一個數組,在第二行我們向此數組中添加了一條記錄,正如我們看到的那樣,往數組中添加數組我們使用push方法。當然我們也可以在初始化數組的時候為其賦初值,代碼如下:

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

以上的代碼我們在定義一個數組的同時為其賦了初值,這樣我們就可以通過以下的方法進行數組的訪問了:

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

在第一行的代碼中我們使用了數組的length屬性來求得數組的長度,在第二行的代碼中我們取得了數組的第一個值。

Knockoutjs數組常用的方法如下:

(1)、myObservableArray.push('Some new value'):增加一個新的元素

(2)、myObservableArray.pop():刪除一個元素,並返回其值

(3)、myObservableArray.unshift('Some new value'):在數組的開始處增加一個新的元素

(4)、myObservableArray.shift():刪除數組的第一個元素,並返回其值

(5)、myObservableArray.reverse():反轉數組的順序

(6)、myObservableArray.sort():數組排序。排序規則可以由用戶自己定義也可以使用默認,默認情況下按照字母順序或者數字的順序進行排序。自己定義排序規則時需要接收數組 中的兩個元素,並且需要返回一個數值,當此值小於0時表示第一個元素較小,當此值大於0時,表示第二個元素較小,當等於0時表示兩個元素相等。示例如下:

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

(7)、myObservableArray.splice():數組截取。例如:myObservableArray.splice(1, 3),代表從數組的第一個元素開始,截取三個元素,並且將他們作為數組返回。

remove and removeAll

observableArray 增加了一些更有用的方法,而且是Js數組沒有的

myObservableArray.remove(someItem)移除myObservableArray數組內所有匹配someItem的對象, 並把這些對象組成一個數組返回

myObservableArray.remove(function(item) { return item.age < 18 })移除myObservableArray數組內所有年齡屬性小於18的對象,並返回這些對象組成的新數組

myObservableArray.removeAll(['Chad', 132, undefined])移除myObservableArray數組內所有匹配'Chad',123, orundefined 的對象並把它們組成新數組返回

myObservableArray.removeAll()移除myObservableArray數組內所有數據,並返回這些數據組成的一個新數組


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM