Javascript MVVM模式前端框架—Knockout 2.1.0系列(2)：使用Observable Array（監控數組）

*本文已經同步至索引目錄：http://www.cnblogs.com/wbpmrck/archive/2012/05/16/Knockout-introduction.html

Observable Array(監控數組)的作用

列表操作是經常會遇到的一個場景，使用監控數組，你可以：

• 保存列表對象，並且使用Ko提供的豐富的API操作列表元素(支持內建js Array的方法，以及ko自己添加的方法:remove,removeAll等)
• 監控數組元素個數的變化，並且自動通知外部。如果與UI綁定，則自動更新UI

Observable Array與js內建Array區別

• Observable Array是ko對象，內部包裝了Array對象，而后者僅僅是一個Array對象 。
• 前者可以跟蹤數組個數變化，后者不能
• 前者可以使用js內建數組對象的方法+ko擴展的API來操作數據，后者只能使用js內建數組對象提供的方法操作數據

Observable Array注意事項

這里需要單獨提示一點對Observable Array理解可能出現偏差的地方：

• Observable Array不監控元素本身的變化：Observable Array只處理元素個數的變化，比如數組元素刪除和添加。元素自身的變化是否能自動監控，取決於元素本身是普通對象還是Observable對象。
• 如何既監控數組元素個數，又監控元素內容變化：往數組中push元素的時候，使用observable元素即可，則該元素可以自動監控自身的變化。

實例講解：Observable Array

基本語法

1、定義

var myObservableArray = ko.observableArray();    //建立一個監控數組
myObservableArray.push('Some value');  //使用push方法添加數組元素

var anotherObservableArray = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]);//可以在建立監控數組的同時初始化數組

2、讀取

alert('The length of the array is ' + myObservableArray().length);//使用()號讀取數組元素，然后就可以隨意操作JS  Array對象的屬性
alert('The first element is ' + myObservableArray()[0]);//讀取第一個元素

3、寫入

var a =ko.observableArray(['1','2'])//初始化的時候寫入值
a(['3','4']);//使用(value)方式重新寫入數據，現在a()=['3','4']

4、訂閱數組元素個數變化事件

var myObservableArray = ko.observableArray();  

myObservableArray.subscribe(function (newVal) {
        alert(newVal.length);
        alert(newVal[0]);
    });//訂閱數組元素變化事件，newVal將會傳入變化后的數組對象

myObservableArray.push('1');//push一個新元素進去，會alert一個長度，和'1'

5、ko擴展的數組API

var myObservableArray = ko.observableArray(["item1", "item2", "item3", "item4", "item5", "item6", "7", "8"]);  //構建監控數組

myObservableArray.remove("item1");//移除item1
myObservableArray.remove(function (item) {
            return item.length < 4;//只有長度小於4的元素被移除
        });//移除 "7", "8"
myObservableArray.removeAll(["item2", "item3"]);//移除item2，item3
myObservableArray.removeAll();//移除所有的

 

Demo1：演示Observable Array基本用法

http://jsfiddle.net/wbpmrck/xDbn7/embedded/

看不到內嵌Demo的點這里查看在線Demo

Demo2：演示Observable Array擴展的API

http://jsfiddle.net/wbpmrck/xDbn7/3/embedded/

看不到內嵌Demo的點這里查看在線Demo

總結

本文主要介紹了ko中的Observable Array用法，這也是我們在日常開發過程中經常需要用到的。ko中的監控數組不僅具有內建js的Array對象的所有方法，還擴展了自己的api更方便的操作數組。

感謝支持

如果本文對您有幫助的話，請別吝嗇手中的推薦票哦~