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上的时候，这个元素项将从数据库删除（同时其它的元素项将正常的插入或者更新）。