Knockout.Js官网学习(数组observable)

前言

  如果你要探测和响应一个对象的变化,你应该用observables。

  如果你需要探测和响应一个集合对象的变化,你应该用observableArray 。

  在很多场景下,它都非常有用,比如你要在UI上需要显示/编辑的一个列表数据集合,然后对集合进行添加和删除。

使用observables数组

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的元素并将被删除元素作为一个数组返回

    myObservableArray.removeAll(['Chad', 132, undefined]);//删除所有等于'Chad', 123, or undefined的元素并将被删除元素作为一个数组返回

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏架构之路

JavaScript的三种类型检测typeof , instanceof , toString比较

1.typeof typeof是js的一个操作符,在类型检测中,几乎没有任何用处。 typeof 返回一个表达式的数据类型的字符串,返回结果为javascrip...

34650
来自专栏DT乱“码”

Java中实现多线程有两种途径

Java中实现多线程有两种途径:继承Thread类或者实现Runnable接口. Runnable接口非常简单,就定义了一个方法run(),继承Runnable...

22250
来自专栏zingpLiu

面向对象(三)【类的特殊成员及高级特性】

前面两篇文章介绍了类与对象的基本概念和类中的一些成员,本篇主要介绍类和对象的特殊成员及一些高级特性。

10330
来自专栏前端儿

理解运用JS的闭包、高阶函数、柯里化

JS的闭包,是一个谈论得比较多的话题了,不过细细想来,有些人还是理不清闭包的概念定义以及相关的特性。

31530
来自专栏老司机的技术博客

人人都能学会的python编程教程8:条件判断与循环

实际的项目中条件判断可以说是使用最多的语法之一了,不管是最简单的判断还是负责的业务逻辑和算法,条件判断都如影随形。

1.2K100
来自专栏老司机的技术博客

宝宝都能学会的python编程教程8:条件判断与循环

先公布上期编程练习的答案,没错,L是一个指向三个列表的二维元祖。 条件判断 实际的项目中条件判断可以说是使用最多的语法之一了,不管是最简单的判断还是负责的业务逻...

35950
来自专栏有趣的django

python面试题(持续更新)

第1~10题 1、一行代码实现1--100之和 >>> sum(range(1,101)) 5050 >>> 2、如何在一个函数内部修改全局变量 a= 3 ...

459110
来自专栏java一日一条

基础类型转化成String

在程序中你可能时常会需要将别的类型转化成String,有时候可能是一些基础类型的值。在拼接字符串的时候,如果你有两个或者多个基础类型的值需要放到前面,你需要显式...

9420
来自专栏kalifaの日々

美团北京视频面试题目

1.用过makefile吗 2.python的多线程是真正的多线程吗? 3.写一个冒牌排序,再写一个递归的冒泡排序 4.写一个单链表反转,十几行代码以内 ...

9820
来自专栏大前端_Web

详解javascript作用域和闭包

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/deta...

12640

扫码关注云+社区

领取腾讯云代金券