Knockout學習之監控屬性

監控屬性

Knockout包含以下三個核心特性：

1.監控屬性和依賴跟蹤

2.顯式綁定

3.模板

 

下面我們將學習這三點中的第一點，在這之前我們先研究下MVVM模式和視圖模型的概念。

 

MVVM和視圖模型

模型：用來存儲應用中的數據。它處於業務領域中，並且包含了相關的屬性以及操作，與用戶界面獨立。在使用OK時，你將經常使用ajax保持該模型與服務端同步。

視圖模型：使用純代碼表示界面的數據和操作。比如，你要實現一個列表編輯功能，那么你的視圖模型就需要維持一組數據項，同時還要提供添加和刪除方法。

視圖：能夠通過可視和可交互的方式呈現視圖模型。它可以顯示來自視圖模型中的數據，也能將用戶操作的命令傳遞給視圖模型。

 

當你使用了KO，你的視圖只需要由簡單的html文檔和顯式綁定就可以輕松的連接到視圖模型，或者你還可以使用模板配合視圖模型中的數據生成html代碼。

 

下面我們使用KO創建一個視圖模型：

 

你可以使用依賴綁定去創建一個非常簡單的視圖去呈現該視圖模型。例如，下面的代碼將顯示personName的值：

 

使用knockout執行綁定

雖然data-bind並不是HTML中原生態的屬性，但是它不會有任何問題。瀏覽器也無法知道它的含義，所以你需要使用knockout使其有效果。

 

下面我們將使用knockout執行綁定：

 

打開頁面你將看到和下面的html一樣的結果：

 

下面是關於applyBindings參數的說明：

第一個參數是你想激活依賴綁定的視圖模型

第二個參數是可選的，主要是用來規定需要綁定的視圖對象，比如我們可以這么寫ko.applyBindings(myViewMode,document,getElementById(‘someElementId’))。

 

監控屬性

現在你已經會創建基本的視圖模型了，下面我們還要學習如何監控視圖模型中的數據，從而可以在視圖模型中的數據發生改變的時候將視圖也改變。

 

下面我們將之前的視圖模型改寫：

 

現在你不需要手動保持視圖的更新，這些會由knockout幫你自動更新。一旦視圖模型的被監控的屬性發生改變對應的視圖也會隨之改變。

 

讀取和寫監控屬性

讀取為當前命名為該屬性名稱的函數，不含有任何參數。

寫為當前命名為該屬性名的函數，並加上需要賦的值。

 

顯式訂閱監控屬性事件

雖然knockout幫我們自動更新了視圖，但是有時候我們需要對傳入的值進行判斷，那么我們就需要訂閱這個事件。

 

下面我們可以通過subscribe進行訂閱：

 

下面是關於該函數的參數說明：

第一個參數是指定回調的函數，第二個參數是可選的，用來指定回調函數執行的上下文，第三個參數是需要訂閱的事件類型（默認為change，另一個是beforeChange）。

 

同時該函數還會返回一個對象，我們可以通過該返回值取消訂閱，比如下面所示的代碼：

 

Knockout默認情況下，如果賦的值跟當前屬性的值相同，是不會觸發change事件的，但是有時我們需要讓其也能夠觸發，那么我們可以加上如下的代碼：

 

延遲觸發事件

筆者看到這個一時還不知道具體運用在哪，這里就順便帶以下吧，主要跟上面的方式相同，時間是毫秒：

 

下面是筆者的測試代碼：

<input type="text" data-bind="value: personName" />

    <script type="text/javascript">
        var myViewModel = {
            personName: ko.observable("Job"),
            personAge: ko.observable(123)
        };

        //myViewModel.personName.extend({ notify: "always" });

        myViewModel.personName.extend({ rateLimit: 1000 });

        myViewModel.personName.subscribe(function (oldValue) {
            console.log("the old value is " + oldValue);
        }, null, "beforeChange");
        
        myViewModel.personName.subscribe(function (newValue) {
            console.log("the new value is " + newValue);
        });

        myViewModel.personName("Job");

        myViewModel.personName("Job");

        ko.applyBindings(myViewModel);
    </script>