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();//移除所有的