Knockout開發中文API系列2–建立數據模型和監控屬性

Observables,這個詞的翻譯來自湯姆大叔,對於部分翻譯不是很準確的,歡迎你們留言,以獲得更好的翻譯。設計模式

Knockout是創建在如下3個核心功能之上的:瀏覽器

  • 一、    屬性監控與依賴跟蹤
  • 二、    聲明式綁定
  • 三、    模版機制

在本節中,咱們將學習3個核內心面的第一個。但在這以前,先讓咱們學習一下MVVM設計模式和View Model的概念。服務器

MVVM和View Models

Model-View-View Model (MVVM)是一種建立用戶界面的設計模式。經過它只要將UI界面分紅如下3個部分,就可使複雜的界面變得簡單:app

一、Model,用於存儲你應用程序數據,這些數據表示你業務領域的對象和數據操做(例如:銀行能夠進行資金轉帳),而且獨立於任何界面。當使用KO的時候,一般是使用Ajax向服務器請求數據來讀寫這個數據模型。編輯器

二、View Model,純粹用於描述數據內容和頁面操做的數據模型。例如,若是你想實現一個列表編輯器,你的ViewModel(數據模型)就是項目清單對象和你所暴露出來的添加和刪除列表項的方法。函數

注意:這不是UI自己,它不具備任何按鈕和顯示樣式的概念。這不是持久化的數據模型—它僅是用戶當前使用的未保存的數據。當使用KO時,你的View Model(數據模型)是純粹的不包含HTML知識的JavaScript對象,保持View Model(數據模型)抽象在使用時能夠保持簡單,所以你能夠更簡單的操做管理更復雜的行爲。學習

三、View,表明View Model狀態的一個可見、互動的UI界面。它主要用於顯示View Model的數據信息、發送用戶命令(例如,當用戶點擊按鈕)以及在View Model發生變化時保持自動更新。spa

使用KO時,你的View層主要就是簡單的將HTML文檔聲明式的綁定到View Model,將它們關聯起來。另外,你也能夠利用模版從View Model獲取數據動態生成HTML。翻譯

使用KO建立一個View Model,僅僅只須要聲明一個JavaScript對象,例如:設計

 
  1. var myViewModel = {   
  2.     personName: 'Bob',   
  3.     personAge: 123   
  4. };  

你能夠建立一個簡單的視圖聲明式綁定到這個View Model上,例如,下面的代碼顯示personName的值:

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

激活Knockout

data-bind屬性並非HTML固有對象,但使用它是徹底正確的(這是徹底遵照HTML5,儘管有驗證器指出這是一個沒法驗證的屬性,但在HTML4當中使用是不會形成任何問題的)。但瀏覽器並不知道它是什麼意思,因此你須要激活Knockout來使其生效。

激活Knockout,只須要將下面的代碼加到<script>標籤中就能夠了:

  1. ko.applyBindings(myViewModel);  

你能夠將這個代碼放到文檔底部,或者放在頂部包含在DOM處理完成諸如JQuery的$函數方法中。

以上操做完成後,你的View(頁面)顯示的內容等同於編寫如下HTML代碼:

  1. The name is <span>Bob</span>  

下面介紹下ko.applyBindings操做時使用的是什麼樣的參數:

第一個參數是你想激活KO時用於聲明式綁定的View Model對象;

第二個參數(可選),你可使用第二個參數來設置要使用data-bind屬性的HTML元素或容器。例如:

  1. ko.applyBindings(myViewModel, document.getElementById('someElementId'))  

它限制了只有ID爲someElementId的元素才能激活使用KO功能,當你在一個頁面中聲明瞭多個View Model來綁定不一樣的界面區域時,這樣限制是頗有好處的。

 

在上節中,咱們知道了若是建立一個ViewModel,而且如何激活Knockout,本節中,將學習監控屬性相關內容。

Observables

上面,你已經看到如何建立一個基本的數據模型以及如何利用綁定來顯示它的屬性。可是KO最重要的一個屬性就是當View Model發生變化時可以自動的更新UI界面。KO是如何可以知道你的View Model已經發生改變了呢?答案是:你須要將你的model屬性聲明成observable的, 由於它是很是特殊的JavaScript 對象,可以通知用戶它的改變以及自動檢測依賴關係。

例如:重寫上述例子中的View Model爲如下代碼:

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

你根本不須要對View進行更改,全部的data-bind語法依然正常工做。所不一樣的是,如今它可以自動檢測變化,並通知它自動更新界面(View)。

Reading and writing observables

並非全部的瀏覽器都支持JavaScript的getters and setters (好比IE),因此,爲了兼容,ko.observable監控的對象都是方法。

一、讀取當前監控的屬性值,只須要直接調用observable(不須要參數),在這個例子當中,調用myViewModel.personName()將會返回'Bob',調用myViewModel.personAge() 將會返回'123'

二、寫一個新值到監控屬性上,調用observable方法,將要寫的值做爲一個參數傳入便可。例如,調用myViewModel.personName('Mary') 將會把名稱改變成 'Mary'

三、一次性改變Model對象監控的多個屬性值,你可使用鏈式方法。例如:myViewModel.personName('Mary').personAge(50) 將會把名稱改變成'Mary'將年齡設置爲 50.

監控屬性最重要的一點就是能夠隨時監控,也就是說,其餘代碼能夠告訴它哪些是須要通知發生變化的。這就是爲何KO會有如此多的內置綁定語法。因此,當你在頁面中編寫data-bind="text: personName"text 會綁定註冊到自身,當personName發生變化時,它可以當即獲得通知。

當你經過調用 myViewModel.personName('Mary') 將名稱的值改變成爲'Mary'時,text綁定會自動更新新值到其對應的DOM對象元素上,這就是爲何改變數據模型可以自動刷新View頁面。

監控屬性的顯示訂閱

一般狀況下,你不須要手工訂閱,因此初學者能夠跳過這一節。

對於高級用戶,若是你想要註冊本身的訂閱來通知監控屬性的變化,你可使用subscribe 方法。例如:

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

subscribe 方法在KO內部不少地方都有用到。你也能夠終止本身的訂閱:首先獲取到這個訂閱,而後調用dispose方法便可。例如:

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

大多數時間,你不須要這麼作,由於內置的綁定和模版系統功能在管理訂閱上已經作了不少工做。

相關文章
相關標籤/搜索