knockout Observable Array(监控数组)

Observable Array(监控数组)的作用

列表操作是经常会遇到的一个场景,使用监控数组,你可以:

  • 保存列表对象,并且使用Ko提供的丰富的API操作列表元素(支持内建js Array的方法,以及ko自己添加的方法:remove,removeAll等)

  • 监控数组元素个数的变化,并且自动通知外部。如果与UI绑定,则自动更新UI

Observable Array与js内建Array区别

  • Observable Array是ko对象,内部包装了Array对象,而后者仅仅是一个Array对象 。

  • 前者可以跟踪数组个数变化,后者不能
  • 前者可以使用js内建数组对象的方法+ko扩展的API来操作数据,后者只能使用js内建数组对象提供的方法操作数据

Observable Array注意事项

这里需要单独提示一点对Observable Array理解可能出现偏差的地方:

  • Observable Array不监控元素本身的变化:Observable Array只处理元素个数的变化,比如数组元素删除和添加。元素自身的变化是否能自动监控,取决于元素本身是普通对象还是Observable对象。

  • 如何既监控数组元素个数,又监控元素内容变化:往数组中push元素的时候,使用observable元素即可,则该元素可以自动监控自身的变化。

实例讲解:Observable Array

基本语法

1、定义

var myObservableArray = ko.observableArray();    //建立一个监控数组
myObservableArray.push(‘Some value‘);  //使用push方法添加数组元素

var anotherObservableArray = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]);//可以在建立监控数组的同时初始化数组

2、读取

alert(‘The length of the array is ‘ + myObservableArray().length);//使用()号读取数组元素,然后就可以随意操作JS  Array对象的属性
alert(‘The first element is ‘ + myObservableArray()[0]);//读取第一个元素

3、写入

var a =ko.observableArray([‘1‘,‘2‘])//初始化的时候写入值
a([‘3‘,‘4‘]);//使用(value)方式重新写入数据,现在a()=[‘3‘,‘4‘]

4、订阅数组元素个数变化事件

var myObservableArray = ko.observableArray();  

myObservableArray.subscribe(function (newVal) {
        alert(newVal.length);
        alert(newVal[0]);
    });//订阅数组元素变化事件,newVal将会传入变化后的数组对象

myObservableArray.push(‘1‘);//push一个新元素进去,会alert一个长度,和‘1‘

5、ko扩展的数组API

var myObservableArray = ko.observableArray(["item1", "item2", "item3", "item4", "item5", "item6", "7", "8"]);  //构建监控数组

myObservableArray.remove("item1");//移除item1
myObservableArray.remove(function (item) {
            return item.length < 4;//只有长度小于4的元素被移除
        });//移除 "7", "8"
myObservableArray.removeAll(["item2", "item3"]);//移除item2,item3
myObservableArray.removeAll();//移除所有的
时间: 2024-10-20 11:59:05

knockout Observable Array(监控数组)的相关文章

初学knockoutjs记录2——Observables监控属性(2 Observable Arrays 监控数组)

1 Observable Arrays 监控数组 如果你想要监测和响应某个对象的变化,你应该使用Observable监控属性:如果你想要监测和响应一个对象集合的变化,那么请使用ObservableArray监控数组,这在很多场景下都很有用,例如当你要呈现或编辑多个值时,当你需要像列表项添加或移除一样处理UI上多个重复片段时. 例如 var myObservableArry = ko.observableArray(); // Initally an empty array myObservabl

【Sorting】【Array】数组中的逆序对

数组中的逆序对 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. 输入: 每个测试案例包括两行: 第一行包含一个整数n,表示数组中的元素个数.其中1 <= n <= 10^5. 第二行包含n个整数,每个数组均为int类型. 输出: 对应每个测试案例,输出一个整数,表示数组中的逆序对的总数. 样例输入: 4 7 5 6 4 样例输出: 5 思路 分治的思想,统计两边内部的逆序对,以及左右两边之间的逆序对 代码 long

【LeetCode-面试算法经典-Java实现】【215-Kth Largest Element in an Array(数组中第K大的数)】

[215-Kth Largest Element in an Array(数组中第K大的数)] [LeetCode-面试算法经典-Java实现][所有题目目录索引] 代码下载[https://github.com/Wang-Jun-Chao] 原题 Find the kth largest element in an unsorted array. Note that it is the kth largest element in the sorted order, not the kth d

无序数组array, 找到数组中两个数的最大差值

题目链接: 无序数组array, 找到数组中两个数的最大差值, 且大数出现在小数之后,如:arr[i]-arr[j], 且 i<j.比如: array 是 [2, 3, 10, 6, 4, 8, 1],最大差值是8(10-2) 解题思路: 记录当前访问过的数组中的最小值 min_val; 2) 当前元素值arr[i] - min_val 和 max_diff作比较 若大于 max_diff , 则更新它的值 1 import javax.validation.constraints.Min; 2

golang之 Array(数组)

目录 一.Array(数组) 二.数组的定义 1. 基本语法 三.数组的初始化 1. 方式一 2. 方式二 3. 方式三 四.数组的遍历 1. 方式一:for循环遍历 2. 方式二:for range遍历 五.多维数组 1. 二维数组的定义 2. 二维数组的遍历 六.数组是值类型 七.数组的其他相关方法 一.Array(数组) 数组是同一种数据类型元素的集合. 在Go语言中,数组从声明时就确定,使用时可以修改数组成员,但是数组大小不可变化 二.数组的定义 1. 基本语法 // 基本语法: var

leetCode 26.Remove Duplicates from Sorted Array(删除数组重复点) 解题思路和方法

Remove Duplicates from Sorted Array Given a sorted array, remove the duplicates in place such that each element appear only once and return the new length. Do not allocate extra space for another array, you must do this in place with constant memory.

(每日算法)LeetCode --- Search in Rotated Sorted Array(旋转数组的二分检索)

Search in Rotated Sorted Array I && II Leetcode 对有序数组进行二分查找(下面仅以非递减数组为例): int binarySort(int A[], int lo, int hi, int target) { while(lo <= hi) { int mid = lo + (hi - lo)/2; if(A[mid] == target) return mid; if(A[mid] < target) lo = mid + 1;

2-JavaScript Array对象(数组)

JavaScript Array 对象 1.数组创建: (1)使用Array构造函数 (2)数组字面量表示法 2.数组方法: 下面是几个重要的数组原型方法: 1)join() join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符,该方法只接收一个参数:即分隔符. 2)push()和pop() push():可以接受任意数量的参数,把它们逐个添加到数组的末尾,并返回修改后的数组的长度. pop():数组末尾移除最后一项,减少数组的

数组Array、数组API

1.数组:批量管理多个数据的存储空间. 数组的作用:现实中,批量管理多个数据都是集中分组存放,良好的数据结构,可极大提高程序的执行效率! 优点:方便查找 2.创建数组:(4种方式) (1)var 变量名=[]; 创建一个空数组 何时使用:暂时不知道数组中的元素内容时(2)var 变量名=[值1,值2,...]; -->创建数组同时,初始化数组中的数据(3)var 变量名=new Array(); 创建一个空数组 new:在window之外,创建一个新空间,保存多个数据 返回新空间的地址! 注意: