小虾虎鱼

小虾虎鱼

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

作者 禾惠 发表于 2015/02/05,最后修改于 2015/02/05

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

ko.observableArray的使用

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

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

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

// 有如下用户
var users = ko.observableArray([
    {name:"chc", website:"www.xiaoboy.com"},
    {name:"baidu", website:"www.baidu.com"},
    {name:"ko", website:"www.knockoutjs.com"}
]);
<table>
    <thead>
        <tr>
            <td>姓名</td>
            <td>网址</td>
        </tr>
    </thead>
    <tbody data-bind="foreach:list">
        <tr>
            <td data-bind="text:name"></td>
            <td data-bind="text:website"></td>
        </tr>
    </tbody>
</table>
ko.applyBindings({list:users});

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

ko.observableArray的操作方法

ko.observableArray的方法和原生数组的方法使用很相似,如原生的数组的pushsliceindexOf等,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")把数组中的xiaoboy.com删除,并已数组的形式返回所删除的元素;
  • users.remove(function(item){return item.name === "chc";})删除用户名为chc的用户,并已数组的形式返回所删除的元素;
  • arr.removeAll(['xiaoboy.com','ko'])删除数组arr中的xiaoboy.comwww.xiaoboy.com的元素,并已数组的形式返回所删除的元素;
  • arr.removeAll()删除数组中所有的元素,并已数组的形式返回这些元素。

destroy and destroyAll

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

本文就介绍到这里,请继续关注小虾虎鱼的后续文章。原创地址http://dwz.cn/BgPPx