文章出處

數據監控

KO的三個內置核心功能:

  1. 監控(Observable)和依賴性跟蹤(dependency tracking)
  2. 聲明綁定(Declarative bindings)
  3. 模板(Templating)

在這個頁面上,您將了解三種核心功能的第一種。但在此之前,讓我們來看看MVVM模式的概念和視圖模型的概念

MVVM模式和視圖模型

模型-視圖-視圖模型(MVVM)是用于構建用戶界面的設計模式。它描述了如何將復雜的UI分割成三個部分:

  • 模型:應用程序所存儲的數據。這個數據代表了你的業務領域對象和操作(例如,可以進行資金轉賬的銀行賬戶),并獨立于任何用戶界面。當使用KO,通常會用Ajax調用一些服務器端API將數據讀取和寫入此存儲模型。
  • 視圖模型:可理解為UI上的數據呈現和操作后的數據暫存的表示。例如,如果你查看一個列表,視圖模型將一系列的數據展示并暴露相關操作(添加和刪除項目)的方法。

    需要注意的是,視圖模型并不參與UI的呈現方式:它不具有按鈕或顯示樣式的任何概念。不是持久化數據模型,它是用戶正在查看或未保存的數據。當使用KO,你的視圖模型是純JavaScript對象。

  • 視圖:代表MVVM模式狀態的可見部分,用戶的互動界面。它顯示從視圖模型的信息,發送命令到視圖模型(例如,當用戶點擊按鈕)。

    當使用KO,視圖是簡單地聲明綁定到其視圖模型的HTML文檔。另外,也可以使用視圖模型的數據生成HTML模板。

要創建具有KO視圖模型,只是聲明任何JavaScript對象。例如:

var myViewModel = { 
    personName: 'Bob', 
    personAge: 123 
};

然后,您可以創建一個非常簡單的視圖使用聲明綁定這一觀點模型。例如,下面的標記顯示personName值:

The name is <span data-bind="text: personName"></span>

激活KO的綁定關系

該data-bind屬性不屬于HTML的基礎元素屬性,但是還是可以正常運行的。但由于瀏覽器不知道這意味著什么,你需要激活KO的綁定關系,使之生效。

要激活KO的綁定關系,在<script>模塊中添加一行代碼:

ko.applyBindings(myViewModel);

您可以把腳本寫在HTML文檔的底部,或者你可以把它寫在HTML文檔頂部并在文檔的DOM就緒后處理,如使用jQuery的$功能。

這就行了!現在,您的視圖將顯示寫下面的HTML:

The name is <span>Bob</span>

ko.applyBindings的參數

第一個參數是要高數KO,你要綁定的視圖模型是那個。

你可以傳遞第二個參數是定義要搜索該文檔的那一部分data-bind屬性。例如,ko.applyBindings(myViewModel, document.getElementById('someElementId'))。這限制激活綁定視圖模型的范圍在HTML元素的ID元素為someElementId及其子元素,如果你想有多個視圖模型的激活綁定或者每個頁面的不同區域進行模型綁定的話這種方式是很有用的。

監控(Observable)

OK,你已經看到了如何創建一個基本視圖模型以及如何顯示綁定的屬性。但是KO的主要好處是,它會根據視圖模型變化自動更新你的UI。KO如何知道什么時候您的視圖模型的一部分改變的呢?答案就是你需要為你的視圖模型設置observable(監控),這是特殊的JavaScript對象,可將變更通知用戶,并能自動檢測依賴關系。

例如,改寫前面的視圖模型對象,如下所示:

var myViewModel = { 
    personName: ko.observable('Bob'), 
    personAge: ko.observable(123) 
};

當視圖模型屬性值發生變化時,會自動更新UI中的data-bind的綁定屬性。同理UI中綁定屬性發生變化時也會自動同步到視圖模型中。

讀寫監控屬性

    

  • 讀取監控屬性的當前值,只需調用視圖模型屬性的無參數方法。在這個例子中,myViewModel.personName()將返回'Bob'myViewModel.personAge()返回123
  • 為了賦值一個新值到監控屬性,只需要調用視圖模型屬性的有參數方法,將值作為參數傳遞。例如,調用myViewModel.personName('Mary')將更改名稱值'Mary'
  • 將值寫入多個監控屬性的模型對象,你可以使用鏈式語法。例如,myViewModel.personName('Mary').personAge(50)將更改名稱值年齡值為'Mary' 50

    

KO將可以監控監控屬性,當你寫data-bind="text: personName"時,text結合自身注冊時得到通知personName的變化。

當您更改名稱值'Mary'調用myViewModel.personName('Mary')時,text綁定會自動更新相關的DOM元素的文本內容。

聲明監控

你通常需要手動設置訂閱,所以初學者應該跳過這一節。

對于高級用戶,如果你想注冊自己的訂閱通知的變化監控,你可以調用subscribe函數。例如:

myViewModel.personName.subscribe(function(newValue) { 
    alert("The person's new name is " + newValue); 
});

該subscribe函數是KO內部函數。大多數時候,你不需要用這個,因為內置的綁定和模板系統管理監控已經夠用了。

該subscribe函數接受三個參數:callback是每當發生通知被調用的函數,target(可選)定義的值this的回調函數,event(可選,默認為"change")是事件接收通知的名稱。

您也可以終止訂閱,可以調用dispose函數,例如:

var subscription = myViewModel.personName.subscribe(function(newValue) { /* do stuff */ }); 
// ...then later... 
subscription.dispose(); // I no longer want notifications

如果你想在監控發生之前執行相關業務,可以使用beforeChange事件。例如:

myViewModel.personName.subscribe(function(oldValue) { 
    alert("The person's previous name is " + oldValue); 
}, null, "beforeChange");

強行監控屬性實時通知用戶

當賦值一個包含原始值(一個數字,字符串,布爾值,或者為null)監控屬性,使用內置的notified ,以確保一個觀測監控屬性的用戶總是得到通知,即使該值是相同的。

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

延緩或抑制更改通知

通常情況下,監控屬性值改變會立即通知其用戶。但是,如果一個監控屬性頻繁更新會帶來高昂的數據傳輸代價,你可以通過限制或延遲變更通知獲得更好的性能。這是通過使用rateLimit增量實現:

// Ensure it notifies about changes no more than once per 50-millisecond period 
myViewModel.personName.extend({ rateLimit: 50 });

文章列表




Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()