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 相关文章推荐
jquery 批量上传图片实现代码
Jan 28 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
JS实现li标签的删除
Apr 12 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
js实现筛选功能
Nov 24 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字符串分割函数explode的实例代码
2013/02/07 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
python实现代理服务功能实例
2013/11/15 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
python创建学生成绩管理系统
2019/11/22 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
Ruby如何进行文件操作
2014/07/17 面试题
最新党员的自我评价分享
2013/11/04 职场文书
村委会换届选举方案
2014/05/03 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
如何拟写通知正文?
2019/04/02 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
php修改word的实例方法
2021/11/17 PHP