Knockoutjs官网翻译系列(二) Observable 数组
承接前文,前文书说道了KO框架中如何使用observable的视图模型属性来与UI元素进行绑定并自动进行双向更新的事儿。observable属性除了服务基础数据类型之外,还定义了专门为服务数组类型的observableArray。
如果你想要监测并响应一个object类型的变化,那么你使用observables。如果你想监测并响应一个集合的变化,就使用observableArray。很多场景下你都会用到它,比如你要在UI上展现或者编辑一个列表内容,期中你会控制他们的展现啊,隐藏啊,添加啊,删除之类的时候,使用它吧。看看下面的demo如何定义:
$(function () {var myObservableArray = ko.observableArray(); // 直接定义myObservableArray.push('Some value'); var myViewModel = { names:ko.observableArray(); //定义在视图模型对象中 }});
注意: 一个observableArray只监测和跟踪集合中的对象,并不监测和跟踪集合中对象的属性,直观来讲就是只关心内部元素的更新和删除以及排序等,并不关心对象属性是否发生变化。
简单的把一个对象放入observableArray中不会让该对象的属性也变成observable。当然如果你想的话你可以将这些对象的属性定义成observable的,这就是另一回事儿了。 一个 observableArray
只是跟踪他们自己所包含的对象, 并且只会在对象增加或减少或排序的时候向监听器发送通知。
observableArray的初始化
如果你想让你的observableArray在一开始就有值,那么可以在构造函数中直接传入一个js数组,像下面这样:
$(function () {var anotherObservableArray = ko.observableArray([{ name: "Bungle", type: "Bear" },{ name: "George", type: "Hippo" },{ name: "Zippy", type: "Unknown" }]);});
读取observableArray信息
其实在幕后一个observableArray实际上也是一个observable数据,只不过它的值是个数组
(额外的,observableArray
添加了很多自己的特性)。所以你可以像方法一样调用它就能直接到里面的javascript数组,就像其他的observable的使用方式一样。然后就可以随意处理这个js数组了。举个例子:
$(function () {var anotherObservableArray = ko.observableArray([{ name: "Bungle", type: "Bear" },{ name: "George", type: "Hippo" },{ name: "Zippy", type: "Unknown" }]);alert('The length of the array is ' + myObservableArray().length);alert('The first element is ' + myObservableArray()[0]); });
从技术上来讲你可以使用任意的原生javascript数组中的方法来操作获取到的js数组,但是你也可以使用KO框架中为observableArray提供的一些等效方法来直接操作而无需转换为js数组,有时候这更有效率 ,因为:
- 它们支持所有浏览器. (例如,原生的javascript数组中的indexOf方法不能在IE8或更早的浏览器版本中使用,但是KO中的indexOf就能完美支持。)
- 其中有一些可以修改数组内容的方法比如
push和
splice
, 在KO中这些方法都自带自动触发和追踪机制,所以所有注册过的监听器一旦在数组内容发生变化的时候都能接收到通知,并且自动为你更新UI。 - 语法上也非常简单. 比如调用KO的
push方法
, 只需要这么写myObservableArray.push(...)。这样的话比先取出原生数组再调用原生数组的push方法要简单。(复杂的写法:
myObservableArray().push(...)
)
下面来看看它包含的一些常见方法:
indexOf
indexOf
方法返回参数所代表的数据在数组中的索引下表,如果找到多个则只返回第一个的索引。例如:myObservableArray.indexOf('Blah')
返回数组中第一个内容为Blash的元素所代表的下表,下表从0开始。如果没有找到的话则返回-1。
slice
slice方法
等效于原声javascript数组中的slice方法
(返回从你指定的起始下标位置到终止下标位置内的所有元素)。
pop, push, shift, unshift, reverse, sort, splice
这些方法都等效于原声javascirpt数组中的方法,但是他们都会向监听器发送通知,因为他们都会改变数组中的元素,包括增删排序。
push(value)
— 添加一个新的元素到集合中。- pop() —删除数组中的最后一个元素并返回。
- unshift( value ) — 在数组的开头插入一个新元素。
- shift() — 删除数组的第一个元素并返回。
- reverse() — 将数组中的所有元素顺序翻转并返回这个observableArray。
- sort() — 排序数组并返回排序后的observableArray。
- splice() — 从给定的起始索引位置删除指定数量的元素并返回这些删除的元素。示例:myObservableArray.splice(1, 3) 从位置1开始删除3个元素,并且将它们作为一个数组返回。
最后再说一下Sort:
默认的排序是按照字母进行排序的, 但是你可以传递一个函数来自定义排序规则。 你的函数需要提供两个参数,框架会将数组中的数据两两传递进去,如果你想让第一个元素排在前面,则返回一个负数,如果你想让第一个元素排在后面就返回一个正数,返回0的话相同的数据位置不变。举个例子, 通过last name排序一个 ‘person’ 集合 , 你可以这么写:myObservableArray.sort(function (left, right) { return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1) })
remove 与removeAll
observableArray
添加了更多有用的方法 :
- remove( someItem ) — 删除所有与someItem相同的值,并将它们作为数组返回。
- remove( function (item) { return item.age < 18; } ) — 删除所有年龄小于18岁的元素,并将它们作为数组返回。
- removeAll( ['Chad', 132, undefined] ) — 删除所有值为Chad、123、undefined的元素并将它们作为数组返回。
removeAll()
—删除所有元素一个不留。
延迟更新通知
通常,一个observableArray内的元素发生改变时(增删排序)会立即向它的订阅者们发送通知。但是如果这个
observableArray会多次重复出现,或者更新会很耗时的时候你可能会希望通过延迟通知的时间间隔来获取更好的性能体验,可以使用
rateLimit
extender 来完成:
myViewModel.myObservableArray.extend({ rateLimit: 50 });
好啦,我们下节见啦。
转载于:https://www.cnblogs.com/MichaelBang/p/5590301.html
Knockoutjs官网翻译系列(二) Observable 数组相关推荐
- Knockoutjs官网翻译系列(一)
最近马上要开始一个新项目的研发,作为第一次mvvm应用的尝试,我决定使用knockoutjs框架.作为学习的开始就从官网的Document翻译开始吧,这样会增加印象并加入自己的思考,说是翻译也并不是纯 ...
- CoherenceModel官网翻译
CoherenceModel官网翻译 models.coherencemodel – Topic coherence pipeline 计算主题模型的主题一致性.这是论文四个阶段主题一致性管道的实现. ...
- git lfs官网翻译
git lfs官网翻译 下载地址:https://git-lfs.github.com/ git lfs说明: Git Large File Storage(LFS) 将大型文件(如音频示例.视频.数 ...
- Hyperledger Fabric 官网翻译入门教程--之关键概念(Hyperledger Fabric 模型)
英文地址:http://hyperledger-fabric.readthedocs.io/en/latest/fabric_model.html Hyperledger Fabric Model/ ...
- NIFI Site to Site 安全模式资料学习整合(均来自官网翻译)
NIFI Site to Site 安全模式资料学习整合(均来自官网翻译) 官网连接:Apache NiFi 文档 概述-翻译官网 当发送数据从一个NIFI示例到另一个NIFI实例,此处可以使用很多不 ...
- 【官网翻译】性能篇(十)性能提示
前言 本文翻译自Android开发者官网的一篇文档,主要用于介绍app开发中性能优化的一实践要点. 中国版官网原文地址为:https://developer.android.google.cn/tra ...
- Struts2官网翻译
翻译一下Struts 2 官网,方便下载:跟踪最新技术等: http://struts.apache.org/ Apache Struts is a free, open-source, MVC fr ...
- Spring官网阅读(二)(依赖注入及方法注入)
上篇文章我们学习了官网中的1.2,1.3两小节,主要是涉及了容器,以及Spring实例化对象的一些知识.这篇文章我们继续学习Spring官网,主要是针对1.4小节,主要涉及到Spring的依赖注入.虽 ...
- spring官网翻译
首页 这是spring官网的头部 Let's build a better Enterprise 让我们建立一个更好的企业. Spring helps development teams everyw ...
最新文章
- acctmod-ftp.sh
- 1.python的安装
- java的多态性学习代码
- golang中如何抓取panic让程序正常退出
- php实现直播答题系统,直播答题解决方案
- 判断应用程序是否是当前激活程序(获得焦点的程序)
- Enterprise Library—缓存应用程序块
- Oracle中drop_column的几种方式和风险
- 阿里云MaxCompute中pyODPS的使用:多线程上传、下载、分区
- chrome frame节点 取_Chrome Frame插件解决IE浏览器兼容问题
- JSP面试题都在这里 1
- 3D元素周期表源码(已加注释)及分析
- 微信小程序下拉刷新不回弹
- 胶片效果滤镜渲染工具:DxO FilmPack Mac
- java与设计模式-观察者模式
- html5 案例练习(注册页面)
- 【2021】13 年终总结
- android auto谷歌地图,如何在 Android Auto 中使用 Waze 而不是谷歌地图
- js实现拼图游戏(数字版本与图片版本)
- 5.3 背景图层和普通图层的转换 [原创Ps教程]