Knockout學習之監控數組

監控數組

單個監控屬性、組合屬性雖然可以解決大部分的問題，但是還有很多是他們無法做到的，比如在一組數據中進行移除添加，所以這節我們將要學習監控數組。

 

由於監控屬性是由ko的observable構造，那么對應的數組則由observableArray構造，比如下面的代碼：

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

 

這里我們通過push添加了一項，ko提供的監控數組跟javascript中的自帶的數組擁有很多相同的方法，所以上手起來非常快。當然監控屬性還有另外一種構造方式，比如下面的代碼：

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

 

當然訪問這個數組的話不能直接通過[]來獲取，而需要像下面這樣獲取：

myObservableArray()[0];

 

最后我們通過一個例子在html中顯示數組：

<span data-bind="text: tarray"></span>
<div>
    <input type="text" data-bind="value: newItem" />
    <button type="button" data-bind="click: addItem">添加</button>
    <button type="button" data-bind="click: removeItem">移除</button>
    <button type="button" data-bind="click:sortItem">排序</button>
    <button type="button" data-bind="click:reverseItem">反序</button>
</div>


    <script type="text/javascript">
        var myObservableArray = ko.observableArray([
            { a: "a", b: "b" },
            { a: "a1", b: "b1" }
        ]);
        myObservableArray()[0];

        myObservableArray.push("asd");

        var appViewModel = function () {
            this.newItem = ko.observable();
            this.tarray = ko.observableArray();
            this.tarray.push("aaaa");
            this.tarray.push("bbbb");
            this.addItem = function () {
                this.tarray.push(this.newItem());
                this.newItem("");
            };
            this.removeItem = function () {
                this.tarray.pop();
            };
            this.sortItem = function () {
                this.tarray.sort();
            };
            this.reverseItem = function () {
                this.tarray.reverse();
            };
        }

        ko.applyBindings(new appViewModel());
</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項，與服務器同步。能夠在很大的程度上提高性能。