Knockout开发中文API系列4–监控属性数组
PS:这个翻译系列好久都没有更新了,实在是不应该,一方面是由于时间不多,另一方面也由于自身惰性太大,从今天起接着更新,会在最近的一月内把这个系列中文API文档翻译完整。
如果你想侦测并响应一个对象的变化,你需要使用observables。如果你想侦测并响应一个集合对象的变化,你需要使用observableArray。这在很多情况下,都显得非常有用,比如你想操作UI上的一组数据,控制其显示或编辑、添加或删除等。
示例
- var myObservableArray = ko.observableArray(); // Initially an empty array
- myObservableArray.push('Some value');
想详细看看observableArray 是如何绑定到UI上并允许用户修改它的话,请看示例。
关键点
一个监控数组observableArray 监视的数组里面的对象,而不是这些对象自身的状态
简单点说,将一个对象放入到observableArray 中,并不会监控这些对象本身的属性。当然,如果你愿意你可以监控这些对象的属性,但这就变成了依赖监控属性。一个observableArray 只跟踪其持有的对象,当其对象添加或移除的时候才通知监听者。
预加载observableArray
如果你希望你的监控数组开始的时候并不是空的,而是包含有一些初始项,那么在申明数组的时候可以在构造器中加入这些对象,例如:
- // This observable array initially contains three objects
- var anotherObservableArray = ko.observableArray([
- { name: "Bungle", type: "Bear" },
- { name: "George", type: "Hippo" },
- { name: "Zippy", type: "Unknown" }
- ]);
从observableArray中读取信息
一个observableArray 数组其实就是一个observable监控对象,只不过这个对象是一个数组。所以你可以像获取普通JavaScript数组那样,通过无参的构造函数调用observableArray 获取其对象的值。你就可以通过下面的方式获取数组中的对象信息了。
示例:
- alert('The length of the array is ' + myObservableArray().length);
- alert('The first element is ' + myObservableArray()[0]);
从技术角度上讲,你可以使用任意的原生JavaScript数组函数进行底层操作,但是KO提供了更好的等价功能函数,它有以下几个有点:
- 1. 它兼容所有的浏览器(例如:原生的JavaScript方式indexOf 不支持IE8以及更早的浏览器,但KO的indexOf 方法却兼容所有浏览器)。
- 2. 在数组操作方面,比如:push和splice,KO的方法可以自动的触发跟踪依赖,并且通知所有订阅者它的变化,同时会自动的更新UI显示。
- 3. 语法更方便,比如调用KO的push方法,只需要写成myObservableArray.push(...),这个比原生的数组调用方式myObservableArray().push(...)好用多了
在上一节中,我们了解了监控属性数组的相关内容,这节主要介绍下读写数组的observableArray的相关函数。
indexOf
indexOf方法返回数组中第一个等于你传入参数项的索引,例如myObservableArray.indexOf('Blah')将会返回从0开始第一个数组项等于Blah的数组索引,如果没有找到匹配记录则返回-1.
Slice
Slice函数是observableArray等价于原生的JavaScript的slice方法(它返回从开始索引到结束索引之间的所有对象集合)。调用myObservableArray.slice(...)等价于调用myObservableArray.slice(...)方法。
操作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()对数组内容进行排序
默认情况下,按照字符(如果是字符串)或数字(如果是数字)顺序排序
另外,你也可以通过传入一个排序函数来对数组进行排序。这个排序函数需要接受两个参数(代表数组两个要比较的项),如果第一项小于第二项,则返回-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个元素,并将这3个元素作为元素数组返回。
想了解observableArray 更多的函数信息,可以参考标准JavaScript数组函数的文档。
remove and removeAll
observableArray 添加了许多非常有用但JavaScript数组默认没有的函数方法。
myObservableArray.remove(someItem) 删除所有值等于someItem 的数组项,并将删除元素作为一个数组返回
myObservableArray.remove(function(item) { return item.age < 18 })删除所有元素age 属性小于18的数组项,并将删除元素作为一个数组返回
myObservableArray.removeAll(['Chad', 132, undefined]) 删除所有值等于'Chad'、132、undefined的数组项,并将删除元素作为一个数组返回
myObservableArray.removeAll()删除所有的数组项,并将删除元素作为一个数组返回
destroy and destroyAll
(注:通常只和和Ruby on Rails开发者有关)
destroy和destroyAll函数是为Ruby on Rails开发者方便使用为开发的:
myObservableArray.destroy(someItem)查找所有值等于someItem 的数组元素对象,并给它们添加_destroy 的属性,赋值为true
myObservableArray.destroy(function(someItem) { return someItem.age < 18 }) 查找所有元素age属性小于18的数组元素对象,并给它们添加_destroy 的属性,赋值为true
myObservableArray.destroyAll(['Chad', 132, undefined])查找所有值等于'Chad'、132、undefined的数组元素对象,并给它们添加_destroy 的属性,赋值为true
myObservableArray.destroyAll()给所有的元素对象添加_destroy 的属性,赋值为true
那么,_destroy是做什么用的?正如我提到的,这只是为Rails 开发者准备的。在Rails 开发过程中,如果你传入一个JSON对象,Rails 框架会自动转换成ActiveRecord对象并且保存到数据库。Rails 框架知道哪些对象以及在数据库中存在,哪些需要添加或更新, 标记_destroy为true就是告诉框架删除这条记录。
注意的是:在KO render一个foreach模板的时候,会自动隐藏带有_destroy属性并且值为true的元素。所以如果你的“delete”按钮调用destroy(someItem) 方法的话,UI界面上的相对应的元素将自动隐藏,然后等你提交这个JSON对象到Rails上的时候,这个元素项将从数据库删除(同时其它的元素项将正常的插入或者更新)。
Knockout开发中文API系列4–监控属性数组的更多相关文章
- Knockout开发中文API系列2–创建数据模型和监控属性
Observables,这个词的翻译来自汤姆大叔,对于部分翻译不是很准确的,欢迎大家留言,以得到更好的翻译. Knockout是建立在以下3个核心功能之上的: 1. 属性监控与依赖跟踪 2. ...
- Knockout开发中文API系列3–使用计算属性
计算属性 如果你已经有了一个监控属性 firstName和lastName,如果你想显示全名该怎么做呢?这个时候你就可以通过计算属性来实现,这个方法依赖于一个或多个监控属性,如果任何依赖对象发生改变他 ...
- Knockout开发中文API系列4–绑定关键字
目的 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 示例 <div data-bind="visible: shouldShowMessage"> You ...
- Knockout开发中文API系列1
从本节开始介绍关于KnockoutJs相关的内容,本节主要介绍knockoutjs一些重要特性与优点,以及它与Jquery等框架库之间的区别. 1.Knockout.js是什么? Knockout是一 ...
- Knockout应用开发指南 第二章:监控属性(Observables)
原文:Knockout应用开发指南 第二章:监控属性(Observables) 关于Knockout的3个重要概念(Observables,DependentObservables,Observabl ...
- KnockoutJS 3.X API 第二章 数据监控(2)监控属性数组
监控属性数组 如果要对一个对象检测和响应变化,会使用监控属性.如果要对一个序列检测并监控变化,需要使用observableArray(监控属性数组).这在你显示或编辑多个值,需要用户界面的部分反复出现 ...
- flask开发restful api系列(8)-再谈项目结构
上一章,我们讲到,怎么用蓝图建造一个好的项目,今天我们继续深入.上一章中,我们所有的接口都写在view.py中,如果几十个,还稍微好管理一点,假如上百个,上千个,怎么找?所有接口堆在一起就显得杂乱无章 ...
- 监控属性数组(Observables Arrays )
如果你想发现并响应一个对象的改变,就应该用监控属性(observables).如果你想发现并响应一个集合的变化,就该用监控属性数组 (observableArray).监控属性数组在显示或编辑多个值以 ...
- Knockout.Js官网学习(监控属性Observables)
前言 1.创建一个ViewModel <script type="text/javascript"> //1.创建一个ViewModel var myViewModel ...
随机推荐
- netty LEAK: ByteBuf.release() was not called before it's garbage-collected
背景.netty抛出完整的error信息如下: 2018-02-08 14:30:43.098 [nioEventLoopGroup-5-1] ERROR io.netty.util.Resource ...
- hdu 4223 Dynamic Programming? (dp)
//连续的和的绝对值最小 # include <stdio.h> # include <string.h> # include <algorithm> # incl ...
- python3 如何给装饰器传递参数
[引子] 之前写过一篇文章用来讲解装饰器(https://www.cnblogs.com/JiangLe/p/9309330.html) .那篇文章的定位是入门级的 所以也就没有讲过多的高级主题,决定 ...
- php分享二十六:读写日志
一:读写日志注意事项: 1:fgets取出日志行后,注意用trim过滤下 2:explode(“\t", $line) 拆分后,注意判断下个数是否正确,如果不正确,怎么处理? 如果某一列 ...
- 【android开发】如何在Linux平台下安装JDK环境
原文:http://android.eoe.cn/topic/android_sdk Linux平台JDK安装 本文主要描述如何在Linux平台下安装JDK环境.进入网页:http://www.ora ...
- android studio(AS) Duplicate files copied in APK META-INF/NOTICE.txt
File 1: /home/slava/.gradle/caches/modules-2/files-2.1/org.apache.httpcomponents/httpmime/4.3.1/f789 ...
- 【Unity】3.6 导入图片资源
分类:Unity.C#.VS2015 创建日期:2016-04-05 一.简介 Unity支持的图像文件格式非常多,包括TIF.PSD.TCA.JPC.PNG.GlF.BMP.IFF.PICT.DDS ...
- angular学习笔记(三十)-指令(7)-compile和link(3)
本篇接着上一篇来讲解当指令中带有template(templateUrl)时,compile和link的执行顺序: 把上一个例子的代码再进行一些修改: 1.将level-two指令改成具有templa ...
- (原创)c++11改进我们的模式之改进代理模式,实现通用的AOP框架
c++11 boost技术交流群:296561497,欢迎大家来交流技术. 本次要讲的时候如何改进代理模式,具体来说是动态代理模式,动态代理模式一般实现AOP框架,不懂AOP的童鞋看这里.我前面的博文 ...
- (转)大白话讲解如何给github上项目贡献代码
转自:https://site.douban.com/196781/widget/notes/12161495/note/269163206/ 2013-03-30 22:53:55 本文献给对g ...