如果想发现并响应一个对象的变化,就应该使用监控属性(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)的更多相关文章

  1. js 二维数组 for 循环重新赋值

    javascript 二维数组的重新 组装 var arr = [[1,2],[3,4],[5,6],[7,8]]; var temp = new Array(); for(var i= 0 ;i&l ...

  2. js二维数组定义和初始化的三种方法总结

    js二维数组定义和初始化的三种方法总结 方法一:直接定义并且初始化,这种遇到数量少的情况可以用var _TheArray = [["0-1","0-2"],[& ...

  3. 2.Knockout.Js(监控属性Observables)

    前言 1.创建一个ViewModel <script type="text/javascript"> //1.创建一个ViewModel var myViewModel ...

  4. js二维数组与字符串

    1. 二维数组:数组中的元素,又引用了另一个数组对象 何时使用:只要保存横行竖列的数据, 具有上下级包含关系的数据, 创建二维数组: 1. var arr=[]; col arr[0]=[" ...

  5. Knockout学习之监控数组

    监控数组 单个监控属性.组合属性虽然可以解决大部分的问题,但是还有很多是他们无法做到的,比如在一组数据中进行移除添加,所以这节我们将要学习监控数组. 由于监控属性是由ko的observable构造,那 ...

  6. js 二维数组定义

    1.二维数组声明方式是下面这样的: var images=new Array(); //先声明一维 for(var i=0;i<10;i++){ //一维长度为10 images[i]=new ...

  7. js二维数组

    1.判断是否为二维数组 function isMultiArr(arr){ return arr.every(function(element){ return element instanceof ...

  8. JS 二维数组

    给一个数组元素,赋一个数组的值,那么,这个数组就是“二维数组”. 二维数组,就得用两层循环来实现.也就是说循环套循环. 二维数组的循环,与二维表格的循环一模一样. 二维数组的访问:数组名后跟多个连续的 ...

  9. 监控属性数组(Observables Arrays )

    如果你想发现并响应一个对象的改变,就应该用监控属性(observables).如果你想发现并响应一个集合的变化,就该用监控属性数组 (observableArray).监控属性数组在显示或编辑多个值以 ...

随机推荐

  1. UIControl事件---iOS-Apple苹果官方文档翻译

    本系列所有开发文档翻译链接地址: iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址 UIControl事件1.UIControlEventTouchDown单点触摸按下 ...

  2. ios的app,有新版本时必须先更新。

    现在没时间整理,先把代码贴出来,以后再做详细的思路整理. 1 在AppController.mm的didFinishLaunchingWithOptions方法里面获取本地应用版本信息,保存起来. / ...

  3. Atlantis(POJ1151+线段树+扫描线)

    题目链接:http://poj.org/problem?id=1151 题目: 题意:求所有矩形的面积,重合部分只算一次. 思路:扫描线入门题,推荐几篇学扫描线的博客: 1.http://www.cn ...

  4. python dlib 面部轮廓实时检测

    1.dlib 实现动态人脸检测及面部轮廓检测 模型下载连接 : http://dlib.net/files/ # coding:utf-8 import cv2 import os import dl ...

  5. bzoj 1046 LIS

    假设我们知道以每个点开始到最后的最长上升序列,设为w[i],这样首先我们在w值中取max,如果询问的值比max大,这样显然就是无解,如果小的话,我们需要求出来字典序最小的方案. 那么对于所有i,我们肯 ...

  6. CART算法(转)

    来源:http://www.cnblogs.com/pinard/p/6053344.html 作者:刘建平Pinard 对于C4.5算法,我们也提到了它的不足,比如模型是用较为复杂的熵来度量,使用了 ...

  7. SQL语句语法简介

    SQL命令一般分为DQL.DML.DDL几类: DQL:数据查询语句,基本就是SELECT查询命令,用于数据查询 DML:Data Manipulation Language的简称,即数据操纵语言,主 ...

  8. python实战===用python调用jar包(原创)

    一个困扰我很久的问题,今天终于解决了.用python调用jar包 很简单,但是网上的人就是乱转载.自己试都不试就转载,让我走了很多弯路 背景:python3.6 32位   + jre 32位  +  ...

  9. UVALive 7040 Color

    题目链接:LA-7040 题意为用m种颜色给n个格子染色.问正好使用k种颜色的方案有多少. 首先很容易想到的是\( k * (k-1)^{n-1}\),这个算出来的是使用小于等于k种颜色给n个方格染色 ...

  10. REST,Web 服务,REST-ful 服务

    介绍 REpresentational State Transfer (REST) 是一种架构原则,其中将 web 服务视为资源,可以由其 URL 唯一标识.RESTful Web 服务的关键特点是明 ...