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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
JavaScript 乱码问题
Aug 06 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
vue-cli3跨域配置的简单方法
Sep 06 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
虫族 ZERG 概述
2020/03/14 星际争霸
php防注
2007/01/15 PHP
php下MYSQL limit的优化
2008/01/10 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
javascript 写类方式之十
2009/07/05 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
JS hashMap实例详解
2016/05/26 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
Python import用法以及与from...import的区别
2015/05/28 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
浅析python标准库中的glob
2020/03/13 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书