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对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 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实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
pandas 将索引值相加的方法
2018/11/15 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
Python计算IV值的示例讲解
2020/02/28 Python
vue常用指令代码实例总结
2020/03/16 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
华为慧通笔试题
2016/04/22 面试题
建筑工程管理专业自荐信范文
2013/12/28 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书