Knockout.js(二):监控数组属性(Observables Arrays)
如果想发现并响应一个对象的变化,就应该使用监控属性(observables),如果想发现并响应一个集合的变化,就需要使用监控属性数组(observableArray)。在很多情况下,它都非常有用,比如你要在UI上需要显示/编辑的一个列表数据集合,然后对集合进行添加和删除。
声明ObservableArray
var myObservableArray = ko.observableArray();
myObservableArray.push("some value");
将一个对象放在observableArray里不会使这个对象本身的属性变化可监控,observable只会监控它拥有的对象,并在这些对象添加或删除的时候发出通知。
如果想在初始化数组的时候给其赋初值,可以在构造器里加入这些初始对象。
var anotherObservableArray = ko.observableArray([
{name: "Bungle", type: "Bear" },
{name: "George", type: "Hippo" },
{name: "Zippy", type: "Unknown" }
]);
一个observableArray其实就是一个observable的监控对象,只不过他的值是一个数组,可以用JavaScript的数组函数进行数组的访问:
alert('The length of the array is ' + myObservableArray().length); //The length of the array is 1
alert('The first element is ' + myObservableArray()[0]); //The first element is some value
alert('The length of the array is ' + anotherObservableArray().length); //The length of the array is 3
alert('The first element is ' + anotherObservableArray()[0]); //The first element is [object Object]
ObservableArray的常用方法
可以观察到上面访问数组的时候,使用的是JavaScript的函数,但KO提供了更好的功能等价函数,有以下优点:
♦ 兼容所有浏览器。
♦ 在数组操作函数方面(如push和splice等),KO可以自动触发依赖跟踪,并通知所有的订阅者它的变化,然后让UI界面相应地自动更新。
♦ 语法更方便(如myObservableArray.push(...)比myObservableArray().push(...)来的方便吧??)
1.indexOf()
myObservableArray.indexOf('Blah'):返回以0为第一个索引的第一个Blah的匹配项的索引
2.slice()
myObservableArray.slice(...):返回给定的从开始索引到结束索引之间所有的对象集合
3.push()
myObservableArray.push(‘some new value’):在数组末尾添加一个新项
4.pop()
myObservableArray.pop():删除数组最后一项并返回返回该项
5.unshift()
myObservableArray.unshift(‘some new value’):在数组头部添加一个项
6.shift()
myObservableArray.shift():删除数组头部第一项并返回该项
7.reverse()
myObservableArray.reverse():翻转整个数组的顺序
8.sort()
myObservableArray.sort():给数组排序
9.splice()
myObservableArray.splice(1,3):删除指定开始索引"1"和指定数目"3"的数组对象元素(第2,3,4个元素)。
10.remove和removeAll
myObservableArray.remove(someItem); // 删除所有等于someItem的元素并将被删除元素作为一个数组返回
myObservableArray.remove(function(item) { return item.age < 18 }); // 删除所有age属性小于18的元素并将被删除元素作为一个数组返回
myObservableArray.removeAll(['Chad', 132, undefined]); // 删除所有等于'Chad', 123, or undefined的元素并将被删除元素作为一个数组返回
11.destroy和destroyAll
myObservableArray.destroy(someItem) 找出所有等于someItem的元素并给他们添加一个属性_destroy,并赋值为true
myObservableArray.destroy(function(someItem) { return someItem.age < 18 }) 找出所有age属性小于18的元素并给他们添加一个属性_destroy,并赋值为true
myObservableArray.destroyAll(['Chad', 132, undefined]) 找出所有等于'Chad', 123, 或undefined 的元素并给他们添加一个属性_destroy,并赋值为true
在KO render一个foreach模板的时候,会自动隐藏带有_destroy属性并且值为true的元素。
所以如果你的"delete”按钮调用destroy(someItem) 方法的话,UI界面上的相对应的元素将自动隐藏,然后等你提交这个JSON对象到Rails上的时候,这个元素项将从数据库删除(同时其它的元素项将正常的插入或者更新)。
Knockout.js(二):监控数组属性(Observables Arrays)的更多相关文章
- js 二维数组 for 循环重新赋值
javascript 二维数组的重新 组装 var arr = [[1,2],[3,4],[5,6],[7,8]]; var temp = new Array(); for(var i= 0 ;i&l ...
- js二维数组定义和初始化的三种方法总结
js二维数组定义和初始化的三种方法总结 方法一:直接定义并且初始化,这种遇到数量少的情况可以用var _TheArray = [["0-1","0-2"],[& ...
- 2.Knockout.Js(监控属性Observables)
前言 1.创建一个ViewModel <script type="text/javascript"> //1.创建一个ViewModel var myViewModel ...
- js二维数组与字符串
1. 二维数组:数组中的元素,又引用了另一个数组对象 何时使用:只要保存横行竖列的数据, 具有上下级包含关系的数据, 创建二维数组: 1. var arr=[]; col arr[0]=[" ...
- Knockout学习之监控数组
监控数组 单个监控属性.组合属性虽然可以解决大部分的问题,但是还有很多是他们无法做到的,比如在一组数据中进行移除添加,所以这节我们将要学习监控数组. 由于监控属性是由ko的observable构造,那 ...
- js 二维数组定义
1.二维数组声明方式是下面这样的: var images=new Array(); //先声明一维 for(var i=0;i<10;i++){ //一维长度为10 images[i]=new ...
- js二维数组
1.判断是否为二维数组 function isMultiArr(arr){ return arr.every(function(element){ return element instanceof ...
- JS 二维数组
给一个数组元素,赋一个数组的值,那么,这个数组就是“二维数组”. 二维数组,就得用两层循环来实现.也就是说循环套循环. 二维数组的循环,与二维表格的循环一模一样. 二维数组的访问:数组名后跟多个连续的 ...
- 监控属性数组(Observables Arrays )
如果你想发现并响应一个对象的改变,就应该用监控属性(observables).如果你想发现并响应一个集合的变化,就该用监控属性数组 (observableArray).监控属性数组在显示或编辑多个值以 ...
随机推荐
- 【BZOJ】2151 种树
[算法]贪心+堆 [题意]n个数字的序列,要求选择互不相邻的k个数字使和最大. [题解] 贪心,就是按一定顺序选取即可最优,不会反悔. 考虑第一个数字选择权值最大的,那么它相邻的两个数字就不能选择,那 ...
- 消息队列之 ActiveMQ(山东数漫江湖)
简介 ActiveMQ 特点 ActiveMQ 是由 Apache 出品的一款开源消息中间件,旨在为应用程序提供高效.可扩展.稳定.安全的企业级消息通信. 它的设计目标是提供标准的.面向消息的.多语言 ...
- HDU 2899 三分
我们对这个函数求二阶导数,发现他的二阶导数是恒大于0的,那么他的导数是单调的,且在某时刻为0,那么这时的x值就是极值处的x值,其实题目说了,有最小值,那么我们三分水过去就好了. 反思:精度不够,因为是 ...
- hdu 1081 To The Max(dp+化二维为一维)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1081 To The Max Time Limit: 2000/1000 MS (Java/Others ...
- Django rest framework + Vue简单示例
构建vue项目参考这篇文章https://segmentfault.com/a/1190000008049815 一.创建Vue项目 修改源:npm config set registry https ...
- linux驱动基础系列--Linux 串口、usb转串口驱动分析
前言 主要是想对Linux 串口.usb转串口驱动框架有一个整体的把控,因此会忽略某些细节,同时里面涉及到的一些驱动基础,比如字符设备驱动.平台驱动等也不进行详细说明原理.如果有任何错误地方,请指出, ...
- android intent 传数据
1. 基本数据类型 Intent intent = new Intent(); intent.setClass(activity1.this, activity2.class); //描述起点和目标 ...
- php设计模式四 ---- 原型模式
1.简介 用于创建重复的对象,同时又能保证性能.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式 意图:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 主要解决:在运 ...
- 如何生成[0,maxval]范围内m个随机整数的无重复的有序序列
在这里我们将待生成的数据结构称为IntSet,接口定义如下: class IntSetImp { public: IntSetImp(int maxelements,int maxval); void ...
- 《java并发编程实战》读书笔记5--任务执行, Executor框架
第6章 任务执行 6.1 在线程中执行任务 第一步要找出清晰的任务边界.大多数服务器应用程序都提供了一种自然的任务边界选择方式:以独立的请求为边界. -6.6.1 串行地执行任务 最简单的任务调度策略 ...