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的js分页代码
Jun 10 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
3种js实现string的substring方法
Nov 09 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
图片上传插件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中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python生成密码字典的方法
2018/07/06 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
python批量修改ssh密码的实现
2019/08/08 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
新闻专业本科生的自我评价分享
2013/11/20 职场文书
远程教育心得体会
2014/01/03 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
校园广播稿100字
2014/10/06 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
python如何利用traceback获取详细的异常信息
2021/06/05 Python
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技