前言:

當你的UI界面稍微複雜且含有一些相同的行為的話，如果你僅僅只使用Jquery，那麼UI處理上會比你想象的要複雜棘手，同時會讓維護費用相當昂貴。思考這樣一個例子：在一個表格裡顯示一個項目列表，統計表格中列表的數量，當項目列表數量小於5時啟用“Add”按鈕，否則就禁用。Jquery沒有基本的數據模型概念，所以你想要獲取項目列表的數量，你需要從表格table/tr/div這些數量上去進行推斷才能知道。如果需要在某些SPAN裡顯示數據的數量，當添加新數據的時候，你還要記得更新這個SPAN的text。當然，你還要記住當總數>=5條的時候，你需要禁用Add按鈕。然後，如果還要實現Delete功能的時候，你不得不指出哪一個DOM元素被點擊以後需要改變。

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不存在單向綁定。

Text綁定

Knockout將參數值設置為元素內容。元素之前的內容將會被覆蓋。

如果參數是一個observable值，text綁定將會在值變化時更新元素text內容。如果參數不是observable值，text綁定僅僅會設置元素內容一次，以後不會再更新。

html綁定

KO設置該參數值到元素的innerHTML屬性上，元素之前的內容將被覆蓋。

如果參數是監控屬性observable的，那元素的內容將根據參數值的變化而更新，如果不是，那元素的內容將只設置一次並且以後不在更新。

Visible綁定

當參數設置為一個假值(例如bool型值false、整型值0、null或者undefined)時，該綁定會設置yourElement.style.display為none，讓元素隱藏。它的優先級高於任何你在CSS中定義的隱藏樣式。

attr綁定

連接的href屬性被設置為index.html， title屬性被設置為橘子大王。

if綁定

此例中如果sha為null，則不會進行顯示。

event綁定

foreach綁定

循環遍歷輸出數組

with綁定

這樣我們在使用user下的width和height的時候我們就不需要使用user.width來調用了，因為我們使用with:user來指定了user的上下文，當我們使用user下面的屬性時就可以直接使用了

submit綁定

當你使用submit綁定的時候， Knockout會阻止form表單默認的submit動作。

Computed Observable

當username或者msg變化，它將會隨時更新(當依賴關係發生變化，你的計算函數就會被調用，並且它的值都會更新到UI對象或其他的依賴屬性上去)。

使用peek控制依賴

比如一個Ajax請求。peek方法可以幫助你在不需要創建依賴的情況下去控制一個監控屬性或者依賴屬性

<code> ko.computed(function () {
        var params = {
            page: this.pageIndex(),
            selected: this.selectedItem.peek()
        };
        $.getJSON('/user/hh', params, this.currentPageData);
    }, this);/<code>

依賴屬性通過Ajax方法和其他兩個監控屬性參數來重新加載一個名為currentPageData的監控屬性。當pageIndex發生變化時，依賴屬性會被更新，但會忽略掉selectedItem的變化，因為它是通過peek方法控制的。在這種情況下，用戶可能希望僅僅在數據被加載時才使用selectedItem的當前值用於追蹤。

以上就是knockout.js的知識點。

記錄學習,每天進步一點點的橘子大王。

喜歡就關注我吧