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数组,有时候这更有效率 ,因为:

  1. 它们支持所有浏览器. (例如,原生的javascript数组中的indexOf方法不能在IE8或更早的浏览器版本中使用,但是KO中的indexOf就能完美支持。)
  2. 其中有一些可以修改数组内容的方法比如 push和splice, 在KO中这些方法都自带自动触发和追踪机制,所以所有注册过的监听器一旦在数组内容发生变化的时候都能接收到通知,并且自动为你更新UI。
  3. 语法上也非常简单. 比如调用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会多次重复出现,或者更新会很耗时的时候你可能会希望通过延迟通知的时间间隔来获取更好的性能体验,可以使用rateLimitextender 来完成:

myViewModel.myObservableArray.extend({ rateLimit: 50 });

好啦,我们下节见啦。

时间: 2024-11-08 15:27:53

Knockoutjs官网翻译系列(二) Observable 数组的相关文章

Knockoutjs官网翻译系列(三) 使用Computed Observables

书接上回,前面谈到了在视图模型中可以定义普通的observable属性以及observableArray属性实现与UI元素的双向绑定,这一节我们继续探讨第三种可实现绑定的属性类型:computed observables,我称它为计算observable(说实话关于observable怎么翻译我还真拿不准). 要是你在视图对象中已经定义了一个叫firstName的observable属性和一个叫lastName的observable属性,而你想显示这个人的全名那要如何处理呢?这种情况下就到了co

Spring官网阅读系列(九):Spring中Bean的生命周期(上)

在之前的文章中,我们一起学习过了官网上容器扩展点相关的知识,包括FactoryBean,BeanFactroyPostProcessor,BeanPostProcessor,其中BeanPostProcessor还剩一个很重要的知识点没有介绍,就是相关的BeanPostProcessor中的方法的执行时机.之所以在之前的文章中没有介绍是因为这块内容涉及到Bean的生命周期.在这篇文章中我们开始学习Bean的生命周期相关的知识,整个Bean的生命周期可以分为以下几个阶段: 实例化(得到一个还没有经

Openstack安装部署指南翻译系列 之 说明(Pike版本官网翻译)

从部署实践来看,部署工作有两大困难,一个是架构设计,一个是排查错误.其中,当部署过程中出现错误,需要排查的时候,如果不了解基础的系统结构原理和基础的安装步骤,是很难定位和解决问题的. 现在Openstack的部署有很多可选项,主要有: 1)根据社区官网最基础的安装文档根据设计对每一个service组件进行安装,这种安装方式最基础,全手工: 2)使用Mirantis公司的Fuel工具进行部署.这种部署方式非常高效,界面友好,Fuel工具真正实现了一键部署,只要设计好网络和功能节点分布,一键部署完成

Knockout.Js官网学习(系列)

1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js官网学习(visible绑定) Knockout.Js官网学习(text绑定) Knockout.Js官网学习(html绑定.css绑定) Knockout.Js官网学习(style绑定.attr绑定) 4.Knockout.Js官网学习(click绑定) Knockout.Js官网学习(event

RavenDB官网文档翻译系列第一

本系列文章主要翻译自RavenDB官方文档,有些地方做了删减,有些内容整合在一起.欢迎有需要的朋友阅读.毕竟还是中文读起来更亲切吗.下面进入正题. 起航 获取RavenDB RavenDB可以通过NuGet获取,也可以直接在RavenDB官网下载压缩包. 首先了解下压缩包中的内容,可以更好的根据需要进行选择. l  Backup  – 包含用于备份的Raven.Backup工具 l  Bundles – 包含所有非内置的插件,如Authentication和Encryption. l  Clie

【工利其器】工具使用之(四)Android System Trace篇(1)官网翻译

前言 Android 开发者官网中对该工具有专门的介绍,本篇文章作为System Trace系列的开头,笔者先不做任何介绍,仅仅翻译一下官网的介绍.在后续的文章中再整理一份学习教程,以及笔者的实践经历.官网中对System Trace的介绍文档路径为[https://developer.android.google.cn/studio/command-line/systrace?hl=en#java].或者在进入到官网的首页后,按照Android Studio > USER GUIDE > C

卸载 Cloudera Manager 5.1.x.和 相关软件【官网翻译】

问题导读: 1.不同的安装方式,卸载方法存在什么区别?2.不同的操作系统,卸载 Cloudera Manager Server and 数据库有什么区别? 重新安装不完整如果你来到这里,因为你的安装没有完成(例如,如果它是由一个虚拟机超时中断),和你想继续安装,然后重新安装,做到以下几点:删除文件和目录: 个人建议:这一步虽然是官网这么做,但是下面命令还是不要执行,因为我们后面还会用到下面命令 /usr/share/cmf/uninstall-cloudera-manager.sh 复制代码 当

android測试工具MonkeyRunner--google官网翻译

近期在复习之前的笔记,在回想MonkeyRunner时看了看google官网的内容,写得不错.就翻译出来分享下.事实上google官网真是一个学习的好地方. 基础知识 MonkeyRunner工具提供了一个API用于在Android代码之外控制Android设备和模拟器.通过MonkeyRunner.您能够写出一个Python程序去安装一个Android应用程序或測试包.执行它,向它发送模拟击键.截取它的用户界面图片.并将截图存储于工作站上.monkeyrunner工具的主要设计目的是用于測试功

android测试工具MonkeyRunner--google官网翻译

最近在复习之前的笔记,在回顾MonkeyRunner时看了看google官网的内容,写得不错,就翻译出来分享下.其实google官网真是一个学习的好地方. 基础知识 MonkeyRunner工具提供了一个API用于在Android代码之外控制Android设备和模拟器.通过MonkeyRunner,您可以写出一个Python程序去安装一个Android应用程序或测试包,运行它,向它发送模拟击键,截取它的用户界面图片,并将截图存储于工作站上.monkeyrunner工具的主要设计目的是用于测试功能