麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 21:41:30
字體:
來源:轉載
供稿:網友
1.簡單舉例
復制代碼 代碼如下:

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

2.關鍵點:監控數組跟蹤的是數組里的對象,而不是這些對象自身的狀態。
簡單說,將一對象放在observableArray 里不會使這個對象本身的屬性變化可監控的。當然你自己也可以聲明這個對象的屬性為observable的,但它就成了一個依賴監控對象了。一個observableArray 僅僅監控他擁有的對象,并在這些對象添加或者刪除的時候發出通知。
3.預加載一個監控數組observableArray
如果你想讓你的監控數組在開始的時候就有一些初始值,那么在聲明的時候,你可以在構造器里加入這些初始對象。例如:
復制代碼 代碼如下:

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

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 == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1);
        });
 

myObservableArray.splice() 刪除指定開始索引和指定數目的數組對象元素。例如myObservableArray.splice(1, 3) 從索引1開始刪除3個元素(第2,3,4個元素)然后將這些元素作為一個數組對象返回。
更多observableArray 函數的信息,請參考等價的JavaScript數組標準函數。
7.remove和removeAll
復制代碼 代碼如下:

observableArray 添加了一些JavaScript數組默認沒有但非常有用的函數:
myObservableArray.remove(someItem);// 刪除所有等于someItem的元素并將被刪除元素作為一個數組返回
myObservableArray.remove(function (item) { return item.age < 18;}) ;//刪除所有age屬性小于18的元素并將被刪除元素作為一個數組返回
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: lutube成人福利在线观看 | 精品国产一区二区三区四 | 国产成人精品午夜视频' | 亚洲xxx在线观看 | 欧美1 | 羞羞的动漫在线观看 | 国产在线精品一区二区三区 | 久久久久久久久久久亚洲 | 欧美高清另类自拍视频在线看 | 久久91精品视频 | 国产亚洲精品久久久久5区 日韩一级片一区二区三区 国产精品久久久久av | 日本成人二区 | 日韩黄色成人 | 黑人一级片 | 爽爽视频免费看 | 欧美亚洲国产一区二区三区 | 曰韩黄色片 | 免费毛片随便看 | 亚洲一区二区在线 | 欧美一级全黄 | 毛片在线免费视频 | 免费的性生活视频 | 精品亚洲二区 | 国产亚洲欧美日韩在线观看不卡 | 久久久av亚洲男天堂 | 91精品国产日韩91久久久久久360 | 超碰99在线观看 | 免费观看一级黄色片 | 亚洲精品午夜视频 | 欧美一级棒 | 国产精品一区在线免费观看 | 毛片免费观看完整版 | 91丝袜| 久久久午夜电影 | 久久精品小短片 | 深夜福利视频免费观看 | 一区二区三区小视频 | 成人黄色小视频网站 | 视频二区国产 | 亚洲一区二区三区四区精品 | 二区三区四区 |