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 面向对象编程基础 多态
Aug 21 Javascript
js中有关IE版本检测
Jan 04 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 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
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
JS 控件事件小结
2012/10/31 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Django-migrate报错问题解决方案
2020/04/21 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
企业安全生产责任书
2014/04/14 职场文书
自我推荐信范文
2014/05/09 职场文书
党校学习心得体会范文
2014/09/09 职场文书
导游词300字
2015/02/13 职场文书
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP