Knockout.js 學習 （六）-- 監控屬性數組 applyBinding & Observables

如果你想發現並響應一個對象的改變，就應該用監控屬性（observables）。如果你想發現並響應一個集合的變化，就該用監控屬性數組（observableArray）。監控屬性數組在 顯示或編輯多個值 以及 對界面的一部分重復顯示或隱藏（如添加刪除條目）等多種情況下 都是很有用的。

如果我們想要使用Knockoutjs表示多個值的話我們可以使用數組監控(Observable Arrays)來表示，形式如下：

var myObservableArray = ko.observableArray();

myObservableArray.push('Some value');

在第一行我們實例化了一個數組，在第二行我們向此數組中添加了一條記錄，正如我們看到的那樣，往數組中添加數組我們使用push方法。當然我們也可以在初始化數組的時候為其賦初值，代碼如下：

var anotherObservableArray = ko.observableArray([ { name: "Bungle", type: "Bear" }, { name: "George", type: "Hippo" }, { name: "Zippy", type: "Unknown" } ]);

以上的代碼我們在定義一個數組的同時為其賦了初值，這樣我們就可以通過以下的方法進行數組的訪問了：

alert('The length of the array is ' + myObservableArray().length); alert('The first element is ' + myObservableArray()[0]);

在第一行的代碼中我們使用了數組的length屬性來求得數組的長度，在第二行的代碼中我們取得了數組的第一個值。

Knockoutjs數組常用的方法如下：

（1）、myObservableArray.push('Some new value')：增加一個新的元素

（2）、myObservableArray.pop()：刪除一個元素，並返回其值

（3）、myObservableArray.unshift('Some new value')：在數組的開始處增加一個新的元素

（4）、myObservableArray.shift()：刪除數組的第一個元素，並返回其值

（5）、myObservableArray.reverse()：反轉數組的順序

（6）、myObservableArray.sort()：數組排序。排序規則可以由用戶自己定義也可以使用默認，默認情況下按照字母順序或者數字的順序進行排序。自己定義排序規則時需要接收數組 中的兩個元素，並且需要返回一個數值，當此值小於0時表示第一個元素較小，當此值大於0時，表示第二個元素較小，當等於0時表示兩個元素相等。示例如下：

myObservableArray.sort(function(left, right) { return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1) })

（7）、myObservableArray.splice()：數組截取。例如：myObservableArray.splice(1, 3)，代表從數組的第一個元素開始，截取三個元素，並且將他們作為數組返回。

remove and removeAll

observableArray 增加了一些更有用的方法，而且是Js數組沒有的

• myObservableArray.remove(someItem) 移除myObservableArray數組內所有匹配someItem的對象， 並把這些對象組成一個數組返回
• myObservableArray.remove(function(item) { return item.age < 18 }) 移除myObservableArray數組內所有年齡屬性小於18的對象，並返回這些對象組成的新數組
• myObservableArray.removeAll(['Chad', 132, undefined]) 移除myObservableArray數組內所有匹配'Chad',123, or undefined 的對象並把它們組成新數組返回
• myObservableArray.removeAll() 移除myObservableArray數組內所有數據，並返回這些數據組成的一個新數組

applyBinding & Observables

一般的數據綁定有三種:One-Time，One-Way，Two-way。

One-Time綁定模式的意思即為從viewModel綁定至UI這一層只進行一次綁定，程序不會繼續追蹤數據的在兩者中任何一方的變化，這種綁定方式很使用於報表數據，數據僅僅會加載一次。
One-Way綁定模式即為單向綁定，即object-UI的綁定，只有當viewModel中數據發生了變化，UI中的數據也將會隨之發生變化，反之不然。
Two-Way綁定模式為雙向綁定，無論數據在Object或者是UI中發生變化，應用程序將會更新另一方，這是最為靈活的綁定方式，同時代價也是最大的。
數據綁定只是作為元素的自定義屬性寫上標簽內，並不能決定它是何種綁定。

如果值是通過ko.observable定義的說明是雙向綁定，否則為One-Time綁定，在knockout不存在單向綁定。

applyBindings
ko.applyBindings（myViewModel）; // Knockout調用applyBindings激活myViewModel（即把myViewModel和View中的聲明式綁定data-bind接洽關系起來）
ko.applyBindings（myViewModel， document.getElementById（""someElementId""））; // 限制只在指定對象someElementId和后代節點中進行激活操縱。
personName: ko.observable（""Bob""），
The name is <span data-bind="text: personName"></span> // 靜態綁定

Observables
並不是所有的瀏覽器都支撐JavaScript的getters和setters辦法（IE），是以從兼容性推敲，ko.observable是function。
讀取observable屬性：myViewModel.personName（）
設置observable屬性：myViewModel.personName（""Mary""）
同時設置多個observable屬性：myViewModel.personName（""Mary""）.personAge（50） 鏈式語法

// 動態綁定（主動訂閱，作廢訂閱）
var subscription = myViewModel.personName.subscribe（function（newValue） { /* do stuff */ }）;
// ...then later...
subscription.dispose（）; // I no longer want notifications

// Computed Observables
    this.fullName = ko.computed（function（） {
        return this.firstName（） + " " + this.lastName（）;
    }， this）;

var myObservableArray = ko.observableArray（）;    // Initially an empty array
myObservableArray.push（""Some value""）;            // Adds the value and notifies observers

// 初始化綁定命組
// This observable array initially contains three objects
var anotherObservableArray = ko.observableArray（[
    { name: "Bungle"， type: "Bear" }，
    { name: "George"， type: "Hippo" }，
    { name: "Zippy"， type: "Unknown" }
]）;


// 自定義排序
myObservableArray.sort（function（left， right） { return left.lastName == right.lastName ？ 0 : （left.lastName < right.lastName ？ -1 : 1） }）

// 可寫的依附屬性 --- 數字主動格局化顯示，保存值時移除無關逗號
function MyViewModel（） {
    this.price = ko.observable（25.99）;
         
    this.formattedPrice = ko.computed（{
        read: function （） {
            return ""￥"" + this.price（）.toFixed（2）;
        }，
        write: function （value） {
            // Strip out unwanted characters， parse as float， then write the raw data back to the underlying "price" observable
            value = parseFloat（value.replace（/[^.d]/g， ""））;
            this.price（isNaN（value） ？ 0 : value）; // Write to underlying storage
        }，
        owner: this
    }）;
}
 
ko.applyBindings（new MyViewModel（））;

Writeable computed observables可寫的依附屬性（FirstName 和 FullName彼此換算，數字主動格局化顯示）
ko.dependentObservable（Knockout 2.0中新增長的辦法，和ko.computed等價，然則加倍便利懂得應用）
Observable Arrays
observableArray ：跟蹤的是數組中的對象，而不是對象的狀況。即observableArray 僅跟蹤它擁有的對象，並且在對象被添加或者刪除的時辰，通知listeners 。要監控對象的屬性變更，須要編寫自力的代碼。
因為observableArray（）辦法放回的是一個數組，是以從技巧上來說，任何Javascript關於數組操縱的原生辦法都能直接應用。然則基於下述來由，凡是推薦應用KO中的等價辦法：
1，KO中的辦法支撐所有主流瀏覽器（比如，Javascript原生辦法indexOf在<=IE8時不正常，而KO的indexOf 能正常工作）
2，dependency tracking
3，語法加倍簡潔：調用KO中的辦法應用myObservableArray.push（...），調用原生Javascript中的辦法應用myObservableArray（）.push（...）
具體每個辦法參考下面鏈接中的文檔
observableArray 排序：默認對字符串用字母排序，對數字用數值排序。可以自定義排序辦法：參考代碼塊中的代碼