Knockout圍繞三個核心功能構建： * 可觀測和依賴跟蹤 * 聲明性綁定 * 模板 在本節中，您將了解這三個選項中的第一個。但在此之前，讓我們先來看看MVVM模式和視圖模型的概念。 ***** # MVVM 和 View Models 模型-視圖-模型（MVVM）是一種用于構建用戶界面的設計模式。它描述了如何通過將潛在復雜的UI分為三個部分來保持其簡單性： 模型：應用程序存儲的數據。此數據表示業務域中的對象和操作（例如，可以執行資金轉賬的銀行帳戶），并且獨立于任何UI。在使用KO時，您通常會對一些服務器端代碼進行Ajax調用，以讀取和寫入存儲的模型數據。 視圖模型：UI上數據和操作的純代碼表示。例如，如果您正在實現一個列表編輯器，那么視圖模型將是一個包含項目列表的對象，并公開用于添加和刪除項目的方法。 請注意，這不是UI本身：它沒有任何按鈕或顯示樣式的概念。它也不是持久化數據模型——它保存用戶正在處理的未保存數據。使用KO時，視圖模型是純JavaScript對象，不包含HTML知識。以這種方式保持視圖模型的抽象可以使其保持簡單，因此您可以管理更復雜的行為而不會迷失方向。 視圖：表示視圖模型狀態的可見交互式UI。它顯示來自視圖模型的信息，向視圖模型發送命令（例如，當用戶單擊按鈕時），并在視圖模型的狀態更改時更新。 使用KO時，視圖只是HTML文檔，帶有聲明性綁定，將其鏈接到視圖模型。或者，您可以使用使用視圖模型中的數據生成HTML的模板。 要使用KO創建視圖模型，只需聲明任何JavaScript對象。例如： ``` var myViewModel = { personName: 'Bob', personAge: 123 }; ``` 然后可以使用聲明性綁定創建此視圖模型的非常簡單的視圖。例如，以下標記顯示personName值： `The name is <span data-bind="text: personName"></span> ` **激活knockout** 數據綁定屬性不是HTML的本機屬性，盡管它完全正常（它在HTML5中嚴格兼容，并且不會導致HTML4出現問題，即使驗證器會指出它是一個無法識別的屬性）。但是由于瀏覽器不知道它的意思，所以需要激活Knockout使其生效。 要激活敲knockout，請將以下行添加到`<script>`塊： ``` ko.applyBindings(myViewModel); ``` 您可以將腳本塊放在HTML文檔的底部，也可以將其放在頂部，并將內容包裝到DOM就緒的處理程序中，例如jQuery的$函數。 就是這樣！現在，您的視圖將顯示為您編寫了以下HTML： `The name is Bob` 如果您想知道ko.applyBindings的參數是什么， 第一個參數表示要將哪個視圖模型對象與它激活的聲明性綁定一起使用 （可選）可以傳遞第二個參數，以定義要搜索文檔的哪部分數據綁定屬性。例如，`ko.applyBindings（myViewModel，document.getElementById（'someElementId'））`。這將激活限制為ID為someElementId的元素及其子體，如果希望有多個視圖模型并將每個視圖模型與頁面的不同區域關聯，這將非常有用。 **Observables** 好的，您已經了解了如何創建基本視圖模型以及如何使用綁定顯示其屬性之一。但是KO的一個關鍵好處是，當視圖模型發生變化時，它會自動更新您的UI。KO如何知道視圖模型的某些部分何時更改？答：您需要將您的模型屬性聲明為可觀察的，因為這些是特殊的JavaScript對象，可以通知訂閱者更改，并可以自動檢測依賴關系。 例如，按如下方式重寫前面的視圖模型對象： ``` var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123) }; ``` 您根本不必更改視圖-相同的數據綁定語法將繼續工作。不同之處在于它現在能夠檢測到變化，一旦檢測到變化，它就會自動更新視圖。 ***** 讀寫Observables 并非所有瀏覽器都支持JavaScript getter和setter（*cough*IE*cough*），因此為了兼容性，ko.observable對象實際上是函數。 要讀取可觀察對象的當前值，只需調用不帶參數的可觀察對象。在本例中，`myViewModel.personName()`將返回“Bob”，`myViewModel.personAge()`將返回123。 要向可觀察對象寫入新值，請調用可觀察對象并將新值作為參數傳遞。例如，調用`myViewModel.personName('Mary')`會將名稱值更改為'Mary'。 要將值寫入模型對象上的多個可觀察屬性，可以使用鏈接語法。例如，`myViewModel.personName('Mary').personAge(50)`將名稱值更改為'Mary'，年齡值更改為50。 可觀察的全部要點是它們可以被觀察到，也就是說，其他代碼可以說它希望收到更改通知。這就是KO的許多內置綁定在內部所做的。因此，當您編寫data bind=“text:personName”時，文本綁定注冊自己，以便在personName更改時收到通知（假設它是一個可觀察的值，現在是）。 當您通過調用`myViewModel.personName('Mary')`將名稱值更改為'Mary'時，文本綁定將自動更新關聯DOM元素的文本內容。這就是視圖模型的更改自動傳播到視圖的方式。