ko数组
数组属性监控
如果你想发现并响应一个对象的改变,就应该用监控属性(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()[0]);
在第一行的代码中我们使用了数组的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 ? 0 : (left.lastName < right.lastName ? -1 : 1)
})
(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数组内所有数据,并返回这些数据组成的一个新数组
ko数组的更多相关文章
- knockoutJS学习笔记06:ko数组与模板绑定
前面已经介绍了基本的绑定和模板相关知识,接下来就看ko里的数组和模板绑定,数组和模板绑定应该是实际项目中用得比较多的,ko提供了很好的支持. 一.observaleArray 前面的监控属性都是单个对 ...
- MVVM架构~knockoutjs系列之为Ajax传递Ko数组对象
返回目录 一些要说的 这是一个很有意思的题目,在KO里,有对象和数组对象两种,但这两种对象对外表现都是一个function,如果希望得到他的值,需要进行函数式调用,如ko_a(),它的结果为一个具体值 ...
- knockout学习笔记目录
关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...
- MVVM架构~目录
回到占占推荐博客索引 MVVM在概念上是真正将页面与数据逻辑分离的模式,在开发方式上,它是真正将前台代码开发者(JS+HTML)与后台代码开发者分离的模式(asp,asp.net,php,jsp).在 ...
- 解决 ko mapping 数组无法添加新对象的问题
这两天页面模板化的进程有些放缓,使用 ko mapping 插件的情形多了起来.组员经常问到的问题即是往 ko mapping 数组添加新对象时,报找不到方法的错误:而使用 ko.observable ...
- Knockout中ko.utils中处理数组的方法集合
每一套框架基本上都会有一个工具类,如:Vue中的Vue.util.Knockout中的ko.utils.jQuery直接将一些工具类放到了$里面,如果你还需要更多的工具类可以试试lodash.本文只介 ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- MVVM架构~knockoutjs系列之数组的$index和$data
返回目录 已经写了很多knockoutjs的文章了,今天在review代码时,忽然看到一个问题,在knockout环境下,如何遍历一个简单的数组?对于遍历对象组件的数组来说,很容易,直接foreach ...
- KnockoutJS 3.X API 第二章 数据监控(2)监控属性数组
监控属性数组 如果要对一个对象检测和响应变化,会使用监控属性.如果要对一个序列检测并监控变化,需要使用observableArray(监控属性数组).这在你显示或编辑多个值,需要用户界面的部分反复出现 ...
随机推荐
- Css - 选择器和样式
Css - 选择器和样式 标签选择器 即使用html标签作为选择对象 <style> div{ background:red; } </style> <div&g ...
- 基于范围的for循环(C++11)
C++11新增了一种循环:基于范围的for循环.这简化了一种常见的循环任务:对数组(或容器类,如vector和array)的每个元素执行相同的操作,如下例所示 for语句允许简单的范围迭代:(只遍历, ...
- Mybatis操作oracle数据库的一些坑
oracle区分大小写,如果不想区分,必须要用引号包住 使用mybatis的generator生成的时候,建议使用全大写表,中间用下划线隔开,会生成驼峰字段 oracle没有空字符串的概念 写myba ...
- 第一章 初识Mysql
Mysql是一个开放源代码的数据库管理系统(DBMS),它是由MySQL AB 公司开发.发布并支持的. 登录 -- mysql #本地登录,默认用户root,空密码,用户为root@127.0.0. ...
- nyoj 633 幂
幂 nyoj 633 应用数学 幂 时间限制:3000 ms | 内存限制:65535 KB 描述 在学习循环的时候,我们都练习过利用循环计算a的k次方.现在给定整数k和一个整数m,请你求出对 ...
- 部署自建CA颁发证书实现https加密
理论忽略:百度上很多 需求:自建证书并实现域名的https加密 部署: 在linux机器上执行以下命令生成私钥 mkdir -p /opt/ssl-cert cd /opt/ssl-cert 1.# ...
- java内部类:成员内部类,静态内部类方法内部类,匿名内部类(A)
package cn.kecheng; /** * 在java中,一个文件可以定义多个类,文件名必须和public 类型的类的类名保持一致.这两个类是平行关系. * 在java中,一个类也可以定义在一 ...
- python介绍及下载
python介绍 Python是一种计算机程序设计语言.是一种面向 对象的动态类型语言,支出被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多的被用于独立的.大型醒 ...
- Selenium WebDriver的实现及工作原理
笔者最近研究学习了selenium的实现和工作原理,阅读了selenium3.141.59的Java源码,没有读完哈...重点从两个接口(org.openqa.selenium.WebDriver和o ...
- window 服务器 安装 sql server 2008 r2 express 并启用远程访问
目前市面上的数据库服务器虽然好,但是并不便宜,一个月数千RMB, 我们可以通过在已有的数据库上自建数据库来解决 目前已知的SQL Server 2008 R2的版本有: 企业版.标准版.工作组版.We ...