Knockoutjs之observable arrays的使用与内置方法介绍

如果只需要单独对一个对象的变化进行监听我们可以使用ko.observable，如果需要对一个集合的变化进行监听那就需要使用ko.observableArray。本文主要介绍ko.observableArray的简单使用和一些操作方法。

ko.observableArray的使用

ko.observableArray与ko.observable使用方法相似，不过ko.observableArray主要是针对于数组。 关于ko.observableArray使用可参考如下代码的介绍：

var arr = ko.observableArray();
console.log(arr()); // 得到的是一个空的数组：[]
arr.push('111com.net');
console.log(arr()); // 得到的结果：['111com.net']
var arr = ko.observableArray(['111com.net','www.111com.net']);
console.log(arr()); // ['111com.net','www.111com.net']

从以上代码可以看出，ko.observableArray与原生的数组使用是差不多的。那么ko.observableArray在实际的应用中到底可以做些什么呢？在开发中往往离不开列表，如文章列表、用户列表等，下面了举一个用户列表的例子：

// 有如下用户
var users = ko.observableArray([
    {name:"chc", website:"www.111com.net"},
    {name:"baidu", website:"www.baidu.com"},
    {name:"ko", website:"www.knockoutjs.com"}
]);

    
        
            
            
        
    
    foreach:list">
        
            
            
        
    
姓名
网址


ko.applyBindings({list:users});

这样我们就实现了一张用户列表。

ko.observableArray的操作方法

ko.observableArray的方法和原生数组的方法使用很相似，如原生的数组的push、slice、indexOf等，ko.observableArray同样支持。以下仍然用到上面的第一个例子中的arr。

push, pop, shift, unshift, reverse, sort, splice

上面的方法与原生数组使用的方法相同，如：arr.push("xiaoboy")，也可以写成：arr().push("xiaoboy")，但前面的写法更好看些。

indexOf

获取元素的索引值，如：arr.indexOf("nodejs")。在IE8及以下IE版本中的原生数组不支持indexOf，但在ko是兼容的。

remove and removeAll

ko中增加的两个方法，这两个方法在实际的应用中很实用，使用很方便。

arr.remove("xiaooby.com")把数组中的111com.net删除，并已数组的形式返回所删除的元素；

users.remove(function(item){return item.name === "chc";})删除用户名为chc的用户，并已数组的形式返回所删除的元素；

arr.removeAll(['111com.net','ko'])删除数组arr中的111com.net和www.111com.net的元素，并已数组的形式返回所删除的元素；

arr.removeAll()删除数组中所有的元素，并已数组的形式返回这些元素。

destroy and destroyAll

这两个方法也是ko增加的，但官方说Note: Usually relevant to Ruby on Rails developers only，意思应该是与用于Ruby on Rails开发上。