监控属性数组(Observables Arrays )
如果你想发现并响应一个对象的改变,就应该用监控属性(observables)。如果你想发现并响应一个集合的变化,就该用监控属性数组 (observableArray)。监控属性数组在显示或编辑多个值以及对界面的一部分重复显示或隐藏(如添加删除条目)等多种情况下 都是很有用的。
如果我们想要使用Knockoutjs表示多个值的话我们可以使用数组监控(Observable Arrays)来表示,形式如下:
- var myObservableArray = ko.observableArray();
- myObservableArray.push('Some value');myObservableArray.push('Some value');
在第一行我们实例化了一个数组,在第二行我们向此数组中添加了一条记录,正如我们看到的那样,往数组中添加数组我们使用push方法。当然我们也可以在初始化数组的时候为其赋初值,代码如下:
- 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()[]);
在第一行的代码中我们使用了数组的length属性来求得数组的长度,在第二行的代码中我们取得了数组的第一个值。
Knockoutjs数组常用的方法如下:
(1)、myObservableArray.push('Some new value'):增加一个新的元素
(2)、myObservableArray.pop():删除一个元素,并返回其值
(3)、myObservableArray.unshift('Some new value'):在数组的开始处增加一个新的元素
(4)、myObservableArray.shift():删除数组的第一个元素,并返回其值
(5)、myObservableArray.reverse():反转数组的顺序
(6)、myObservableArray.sort():数组排序。排序规则可以由用户自己定义也可以使用默认,默认情况下按照字母顺序或者数字的顺序进行排序。自己定义排序规则时需要接收数组 中的两个元素,并且需要返回一个数值,当此值小于0时表示第一个元素较小,当此值大于0时,表示第二个元素较小,当等于0时表示两个元素相等。示例如下:
- myObservableArray.sort(function(left, right) {
- return left.lastName == right.lastName ? : (left.lastName < right.lastName ? - : )
- })
(7)、myObservableArray.splice():数组截取。例如:myObservableArray.splice(1, 3),代表从数组的第一个元素开始,截取三个元素,并且将他们作为数组返回。
remove and removeAll
observableArray 增加了一些更有用的方法,而且是Js数组没有的
myObservableArray.remove(someItem)移除myObservableArray数组内所有匹配someItem的对象, 并把这些对象组成一个数组返回
myObservableArray.remove(function(item) { return item.age < 18 })移除myObservableArray数组内所有年龄属性小于18的对象,并返回这些对象组成的新数组
myObservableArray.removeAll(['Chad', 132, undefined])移除myObservableArray数组内所有匹配'Chad',123, orundefined 的对象并把它们组成新数组返回
myObservableArray.removeAll()移除myObservableArray数组内所有数据,并返回这些数据组成的一个新数组
监控属性数组(Observables Arrays )的更多相关文章
- Knockout.js(二):监控数组属性(Observables Arrays)
如果想发现并响应一个对象的变化,就应该使用监控属性(observables),如果想发现并响应一个集合的变化,就需要使用监控属性数组(observableArray).在很多情况下,它都非常有用,比如 ...
- Knockout开发中文API系列4–监控属性数组
PS:这个翻译系列好久都没有更新了,实在是不应该,一方面是由于时间不多,另一方面也由于自身惰性太大,从今天起接着更新,会在最近的一月内把这个系列中文API文档翻译完整. 如果你想侦测并响应一个对象的变 ...
- KnockoutJS 3.X API 第二章 数据监控(2)监控属性数组
监控属性数组 如果要对一个对象检测和响应变化,会使用监控属性.如果要对一个序列检测并监控变化,需要使用observableArray(监控属性数组).这在你显示或编辑多个值,需要用户界面的部分反复出现 ...
- 创建数据模型(View Models )和监控属性(Observables)
Knockout是建立在以下3个核心功能之上的: 1. 属性监控与依赖跟踪 2. 声明式绑定 3. 模版机制 在本节中,我们将学习3个核心里面的第一个.但在这之前,先让我们学习一下MVVM设计模式和V ...
- KnockoutJS(2)-监控属性
本节主要涉及到3个内容: 1. 监控属性 Observables (这个用的比较多,但是其本身使用比较简单,唯一需要注意就是,它监控的对象是一个方法,所以取值和设置值的时候容易混淆) 2. 计算属性 ...
- Knockout应用开发指南 第二章:监控属性(Observables)
原文:Knockout应用开发指南 第二章:监控属性(Observables) 关于Knockout的3个重要概念(Observables,DependentObservables,Observabl ...
- (初)Knockout 监控属性(Observables)
1 创建带有监控属性的view model 1.1 Observables Knockout是在下面三个核心功能是建立起来的: 监控属性(Observables)和依赖跟踪(Dependency tr ...
- 第二章:监控属性(Observables)
关于Knockout的3个重要概念(Observables,DependentObservables,ObservableArray),本人无法准确表达它的准确含义,所以暂定翻译为(监控属性.依赖监控 ...
- KnockoutJS 3.X API 第三章 计算监控属性(1) 使用计算监控属性
计算监控属性(Computed Observables) 如果你有一个监控属性firstName,和另一个lastName,你要显示的全名?可以使用计算监控属性来实现-它依赖于一个或多个其他监控属性, ...
随机推荐
- angular2 获取到的数据无法实时更新的问题
在修改完组件数据之后调用下面两句: this.changeDetectorRef.markForCheck(); this.changeDetectorRef.detectChanges(); 注入到 ...
- UVA-10791 数学
UVA-10791 题意: 输入n (1<=n<2^31) 求至少两个正整数使得他们的lcm等于n并且他们的和最小,输出最小和 代码: // a*b=lcm*gcd => a=lcm ...
- MVC网站发布到 IIS
接下来将发布成功的站点部署到iis7.0. 步骤如下: 1. 安装 Microsoft .net FrameWork 4.0安装包(网站开发时候使用的就是.net framework4.0框架); 2 ...
- 前端PHP入门-009-匿名函数
想想JavaScript当中是否有这个概念? 所谓匿名,就是没有名字. 匿名函数,也就是没有函数名的函数. 匿名函数的第一种用法,直接把赋数赋值给变量,调用变量即为调用函数. 匿名函数的写法比较灵活. ...
- HTML5笔记-加强版
新增的语法结构表单验证 1.新的页面结构以及宽松的语法规范:<!doctype html> <meta charset=“utf-8”/> 2.新的结构化元素:语义化标签: ...
- 解决VSCode终端中文乱码问题
VSCode终端其实调用的是cmd.exe,所以当这里出现中文乱码的时候要解决的是cmd的编码设置问题. 可以通过chcp命令查看cmd的编码设置,GBK2312的代码页编号是936,然后改成utf- ...
- 2015/11/3用Python写游戏,pygame入门(3):字体模块、事件显示和错误处理
游戏里面一般是肯定会出现文字显示的,即使是俄罗斯方块也应该显示分数.那么我们应该怎样来显示文字呢,今天一起学习一下pygame的font模块. 使用字体模块 pygame可以直接调用系统字体,也可以调 ...
- 桥接模式_NAT模式_仅主机模式_模型图.ziw
2017年1月12日, 星期四 桥接模式_NAT模式_仅主机模式_模型图 null
- Shell编程——bash基础知识
# Bash中自动补全时忽略大小写 # 编辑~/.inputrc(没有的话,就新建一个),在最后加一行: set completion-ignore-case on # 若要用方向键Up,Down来搜 ...
- 获取Spring的ApplicationContext的几种方式
Application Context定义 简单来说就是Spring中的高级容器,可以获取容器中的各种bean组件,注册监听事件,加载资源文件等功能. 具体定义可以参考官网:https://sprin ...