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更方便的操作数组。

感谢支持

如果本文对您有帮助的话，请别吝啬手中的推荐票哦~