代码改变世界

Knockout学习之监控数组

2014-06-05 10:29  y-z-f  阅读(3486)  评论(0)  编辑  收藏  举报

监控数组

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

 

由于监控属性是由ko的observable构造，那么对应的数组则由observableArray构造，比如下面的代码：

1 var myObservableArray = ko.observableArray();
2 myObservableArray.push("asd");

 

这里我们通过push添加了一项，ko提供的监控数组跟javascript中的自带的数组拥有很多相同的方法，所以上手起来非常快。当然监控属性还有另外一种构造方式，比如下面的代码：

1         var myObservableArray = ko.observableArray([
2             { a: "a", b: "b" },
3             { a: "a1", b: "b1" }
4         ]);

 

当然访问这个数组的话不能直接通过[]来获取，而需要像下面这样获取：

myObservableArray()[0];

 

最后我们通过一个例子在html中显示数组：

 1 <span data-bind="text: tarray"></span>
 2 <div>
 3     <input type="text" data-bind="value: newItem" />
 4     <button type="button" data-bind="click: addItem">添加</button>
 5     <button type="button" data-bind="click: removeItem">移除</button>
 6     <button type="button" data-bind="click:sortItem">排序</button>
 7     <button type="button" data-bind="click:reverseItem">反序</button>
 8 </div>
 9 
10 
11     <script type="text/javascript">
12         var myObservableArray = ko.observableArray([
13             { a: "a", b: "b" },
14             { a: "a1", b: "b1" }
15         ]);
16         myObservableArray()[0];
17 
18         myObservableArray.push("asd");
19 
20         var appViewModel = function () {
21             this.newItem = ko.observable();
22             this.tarray = ko.observableArray();
23             this.tarray.push("aaaa");
24             this.tarray.push("bbbb");
25             this.addItem = function () {
26                 this.tarray.push(this.newItem());
27                 this.newItem("");
28             };
29             this.removeItem = function () {
30                 this.tarray.pop();
31             };
32             this.sortItem = function () {
33                 this.tarray.sort();
34             };
35             this.reverseItem = function () {
36                 this.tarray.reverse();
37             };
38         }
39 
40         ko.applyBindings(new appViewModel());
41 </script>

 

读者可以看到默认将会以逗号作为分隔符显示数组中的数据，然后我们在输入框中输入文字然后点添加就会在这个监控数组中添加一项，因为KO的自动同步，所以html也跟着更新了。如果我们点移除则会从监控数组中移除一项。点击排序就会对监控数组进行排序。最后一个就是反序了，就会将监控数组的数据倒过来。而且这些过程都是无刷新的。

 

相比javascript中的数组，ko提供的监控数组还多那么些方法，比如remove，则可以删除我们指定的项，比如myObservableArray.remove(someItem)则会删除数组中等于someItem的项，当然我们也可以传递一个函数给他，比如myObservableArray.remove(function(item) { return item.age < 18 })，则会删除满足条件的项，除了remove还有removeAll，这个方法可以传递给它一个数组，然后从监控数组中删除等于该数组中项，如果不传递任何参数则删除所有项。

 

但是对于一些需要跟服务器进行同步的情况下，直接删除项不是一个好的方式。因为这样我们就要在每次删除的时候要跟服务器同步。所以KO还提供了destroy和destroyAll方法，具体的用法和上面的一样，但是他们不会真正删除那些项，而是会在这些项目设置一个特定的属性_destroy，并且设置该属性的值为true。这样我们就可以在用户完成操作后遍历监控属性中_destroy为true项，与服务器同步。能够在很大的程度上提高性能。