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 原型模式实现OOP的再研究
Apr 09 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
详解JS中的attribute属性
Apr 25 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
图片上传插件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
flash用php连接数据库的代码
2011/04/21 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PHP文件操作详解
2016/12/30 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
Python字典底层实现原理详解
2019/12/18 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
python能做哪些生活有趣的事情
2020/09/09 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
白酒代理协议书范本
2014/10/26 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
花木兰观后感
2015/06/10 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
Go语言读取txt文档的操作方法
2022/01/22 Golang
在python中读取和写入CSV文件详情
2022/06/28 Python