国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 21:41:30
字體:
供稿:網(wǎng)友
1.簡單舉例
復(fù)制代碼 代碼如下:

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

2.關(guān)鍵點:監(jiān)控數(shù)組跟蹤的是數(shù)組里的對象,而不是這些對象自身的狀態(tài)。
簡單說,將一對象放在observableArray 里不會使這個對象本身的屬性變化可監(jiān)控的。當然你自己也可以聲明這個對象的屬性為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其實就是一個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ù),他們非常有用是因為:
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ù)組項的索引。例如:myObservableArray.indexOf('Blah')將返回以0為第一個索引的第一個等于Blah的數(shù)組項的索引。如果沒有找到相等的,將返回-1。  
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ù)組末尾添加一個新項
myObservableArray.pop();// 刪除數(shù)組最后一個項并返回該項
myObservableArray.unshift('Some new value');// 在數(shù)組頭部添加一個項
myObservableArray.shift();// 刪除數(shù)組頭部第一項并返回該項
myObservableArray.reverse();// 翻轉(zhuǎn)整個數(shù)組的順序
myObservableArray.sort();// 給數(shù)組排序

默認情況下,是按照字符排序(如果是字符)或者數(shù)字排序(如果是數(shù)字)。
   你可以排序傳入一個排序函數(shù)進行排序,該排序函數(shù)需要接受2個參數(shù)(代表該數(shù)組里需要比較的項),如果第一個項小于第二個項,返回-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ù)組標準函數(shù)。
7.remove和removeAll
復(fù)制代碼 代碼如下:

observableArray 添加了一些JavaScript數(shù)組默認沒有但非常有用的函數(shù):
myObservableArray.remove(someItem);// 刪除所有等于someItem的元素并將被刪除元素作為一個數(shù)組返回
myObservableArray.remove(function (item) { return item.age < 18;}) ;//刪除所有age屬性小于18的元素并將被刪除元素作為一個數(shù)組返回
發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 德格县| 荆门市| 本溪市| 黄梅县| 临洮县| 兴文县| 金乡县| 漯河市| 长兴县| 和平县| 民丰县| 长海县| 洛阳市| 天柱县| 英吉沙县| 徐水县| 新沂市| 嘉善县| 扶风县| 上高县| 台州市| 湘潭市| 凌海市| 寿光市| 英德市| 六盘水市| 黄山市| 甘肃省| 金堂县| 弋阳县| 兴和县| 天全县| 吉木萨尔县| 甘谷县| 长白| 正安县| 阳城县| 武穴市| 西乌珠穆沁旗| 祁东县| 宜丰县|