如果你想发现并响应一个对象的改变,就应该用监控属性(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 )的更多相关文章

  1. Knockout.js(二):监控数组属性(Observables Arrays)

    如果想发现并响应一个对象的变化,就应该使用监控属性(observables),如果想发现并响应一个集合的变化,就需要使用监控属性数组(observableArray).在很多情况下,它都非常有用,比如 ...

  2. Knockout开发中文API系列4–监控属性数组

    PS:这个翻译系列好久都没有更新了,实在是不应该,一方面是由于时间不多,另一方面也由于自身惰性太大,从今天起接着更新,会在最近的一月内把这个系列中文API文档翻译完整. 如果你想侦测并响应一个对象的变 ...

  3. KnockoutJS 3.X API 第二章 数据监控(2)监控属性数组

    监控属性数组 如果要对一个对象检测和响应变化,会使用监控属性.如果要对一个序列检测并监控变化,需要使用observableArray(监控属性数组).这在你显示或编辑多个值,需要用户界面的部分反复出现 ...

  4. 创建数据模型(View Models )和监控属性(Observables)

    Knockout是建立在以下3个核心功能之上的: 1. 属性监控与依赖跟踪 2. 声明式绑定 3. 模版机制 在本节中,我们将学习3个核心里面的第一个.但在这之前,先让我们学习一下MVVM设计模式和V ...

  5. KnockoutJS(2)-监控属性

    本节主要涉及到3个内容: 1. 监控属性 Observables (这个用的比较多,但是其本身使用比较简单,唯一需要注意就是,它监控的对象是一个方法,所以取值和设置值的时候容易混淆) 2. 计算属性  ...

  6. Knockout应用开发指南 第二章:监控属性(Observables)

    原文:Knockout应用开发指南 第二章:监控属性(Observables) 关于Knockout的3个重要概念(Observables,DependentObservables,Observabl ...

  7. (初)Knockout 监控属性(Observables)

    1 创建带有监控属性的view model 1.1 Observables Knockout是在下面三个核心功能是建立起来的: 监控属性(Observables)和依赖跟踪(Dependency tr ...

  8. 第二章:监控属性(Observables)

    关于Knockout的3个重要概念(Observables,DependentObservables,ObservableArray),本人无法准确表达它的准确含义,所以暂定翻译为(监控属性.依赖监控 ...

  9. KnockoutJS 3.X API 第三章 计算监控属性(1) 使用计算监控属性

    计算监控属性(Computed Observables) 如果你有一个监控属性firstName,和另一个lastName,你要显示的全名?可以使用计算监控属性来实现-它依赖于一个或多个其他监控属性, ...

随机推荐

  1. python学习(十七) 爬取MM图片

    这一篇巩固前几篇文章的学到的技术,利用urllib库爬取美女图片,其中采用了多线程,文件读写,目录匹配,正则表达式解析,字符串拼接等知识,这些都是前文提到的,综合运用一下,写个爬虫示例爬取美女图片.先 ...

  2. hihocoder #1584 : Bounce

    题意; 有一个n*m的网格阵,球从左上角开始在网格中碰撞,碰到边界就直角反弹,到达格子的角落结束,求途中经过一次的格子数. 代码: //神马规律啊,设x表示球与垂直面的撞击次数,y为球与水平墙面的撞击 ...

  3. Python之文件操作:os模块

    Python os 模块提供了一个统一的操作系统接口函数 一.对于系统的操作 1.os.name 当前使用平台 其中 ‘nt’ 是 windows,’posix’ 是linux 或者 unix 2.o ...

  4. c语言时间计算

    C语言使用time_t结构体表示时间戳,它本质上是个long类型. 我们可以使用如下函数获取当前时间的时间戳: time_t time(time_t* timer) 函数功能:得到从标准计时点(一般是 ...

  5. Mybatis多参数及实体对象传递

    在使用Mybatis的时候,经常会有各种各样的参数传递,不同类型,不同个数的参数. 先上个例子:     public List<LifetouchRelease> findOfficeL ...

  6. HDU3068 最长回文 MANACHER+回文串

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=3068 Problem Description 给出一个只由小写英文字符a,b,c...y,z组成的字符 ...

  7. 重构改善既有代码设计--重构手法04:Replace Temp with Query (以查询取代临时变量)

    所谓的以查询取代临时变量:就是当你的程序以一个临时变量保存某一个表达式的运算效果.将这个表达式提炼到一个独立函数中.将这个临时变量的所有引用点替换为对新函数的调用.此后,新函数就可以被其他函数调用. ...

  8. java学习——equals()和==的比较

    equals 方法是 java.lang.Object 类的方法. 下面从两个方面来说明equals()和==的差别:(1)对于字符串变量来说,使用“==”和“equals()”方法比较字符串时,其比 ...

  9. CSS浏览器兼容问题集-第二部分

    11.高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时.   例:  #box {background-color:# ...

  10. [php]php错误处理机制

    1.判断文件是否存在,file_exists("文件名") or die("no such file");2.set_error_hanlder("错 ...