Knockout数组(observable)使用详解示例


Posted in Javascript onNovember 15, 2013

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的元素并将被删除元素作为一个数组返回
Javascript 相关文章推荐
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
leaflet的开发入门教程
Nov 17 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
图片上传插件jquery.uploadify详解
Nov 15 #Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 #Javascript
Json和Jsonp理论实例代码详解
Nov 15 #Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 #Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 #Javascript
简洁Ajax函数处理(示例代码)
Nov 15 #Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 #Javascript
You might like
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python的math模块中的常用数学函数整理
2016/02/04 Python
详解Swift中属性的声明与作用
2016/06/30 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
Python Django路径配置实现过程解析
2020/11/05 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
如何掌握自荐信格式呢
2013/11/19 职场文书
商务日语毕业生自荐信
2013/11/23 职场文书
客户表扬信范文
2014/01/10 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
五好家庭申报材料
2014/12/20 职场文书
庭外和解协议书
2016/03/23 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL