KnockoutJS - 可觀察物件

KnockoutJS 建立在以下 3 個重要概念之上。

可觀察物件及其之間的依賴項跟蹤 - DOM 元素透過“data-bind”連線到 ViewModel。它們透過可觀察物件交換資訊。這會自動處理依賴項跟蹤。
UI 和 ViewModel 之間的宣告式繫結 - DOM 元素透過“data-bind”概念連線到 ViewModel。
模板用於建立可重用元件 - 模板提供了一種強大的方法來建立複雜的 Web 應用程式。

我們將在本章中學習可觀察物件。

顧名思義，當您將 ViewModel 資料/屬性宣告為可觀察物件時，每次資料修改都會自動反映在使用該資料的所有位置。這也包括重新整理相關的依賴項。KO 會處理這些事情，無需編寫額外的程式碼來實現此目的。

使用可觀察物件，可以非常輕鬆地使 UI 和 ViewModel 動態通訊。

語法

您只需要使用函式ko.observable()宣告 ViewModel 屬性即可使其成為可觀察物件。

this.property = ko.observable('value');

示例

讓我們來看下面的示例，它演示了可觀察物件的使用。

即時演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Observable Example</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>Enter your name: <input data-bind = "value: yourName" /></p>
      <p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->

         function AppViewModel() {
            this.yourName = ko.observable("");
         }

         // Activates knockout.js
         ko.applyBindings(new AppViewModel());
      </script>
   </body>
</html>

以下行用於輸入框。如您所見，我們使用了 data-bind 屬性將 yourName 值繫結到 ViewModel。

<p>Enter your name: <input data-bind = "value: yourName" /> <p>

以下行僅列印 yourName 的值。請注意，此處 data-bind 型別為文字，因為我們只是讀取該值。

<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

在以下行中，ko.observable 監視 yourName 變數以查詢資料中的任何修改。一旦發生修改，相關位置也會使用修改後的值進行更新。當您執行以下程式碼時，將出現一個輸入框。當您更新該輸入框時，新值將反映或重新整理到其使用的位置。

this.yourName = ko.observable("");

輸出

讓我們執行以下步驟，以瞭解上述程式碼的工作原理：

將上述程式碼儲存到first_observable_pgm.htm檔案中。
在瀏覽器中開啟此 HTML 檔案。
輸入名稱為 Scott，並觀察名稱是否反映在輸出中。

資料修改可以從 UI 或 ViewModel 進行。無論從哪裡更改資料，UI 和 ViewModel 都會在它們之間保持同步。這使其成為雙向繫結機制。在上面的示例中，當您在輸入框中更改姓名時，ViewModel 會獲得一個新值。當您從 ViewModel 內部更改 yourName 屬性時，UI 會收到一個新值。

讀取和寫入可觀察物件

下表列出了可以在可觀察物件上執行的讀寫操作。

序號	讀/寫操作及語法
1	讀取要讀取值，只需像這樣呼叫可觀察物件屬性，無需引數：AppViewModel.yourName();
2	寫入要在可觀察物件屬性中寫入/更新值，只需像這樣在引數中傳遞所需的值：AppViewModel.yourName('Bob');
3	寫入多個可以使用鏈式語法在同一行更新多個 ViewModel 屬性，例如：AppViewModel.yourName('Bob').yourAge(45);

序號

讀/寫操作及語法

讀取

要讀取值，只需像這樣呼叫可觀察物件屬性，無需引數：AppViewModel.yourName();

寫入

要在可觀察物件屬性中寫入/更新值，只需像這樣在引數中傳遞所需的值：AppViewModel.yourName('Bob');

寫入多個

可以使用鏈式語法在同一行更新多個 ViewModel 屬性，例如：AppViewModel.yourName('Bob').yourAge(45);

可觀察陣列

可觀察物件的宣告負責處理單個物件的資料修改。可觀察陣列用於處理物件集合。當您處理包含多種型別值且基於使用者操作頻繁更改其狀態的複雜應用程式時，這是一個非常有用的功能。

語法

this.arrayName = ko.observableArray();    // It's an empty array

可觀察陣列僅跟蹤其中新增或刪除了哪些物件。如果修改了單個物件的屬性，它不會發出通知。

首次初始化

您可以初始化陣列，並同時將其宣告為可觀察物件，方法是將初始值傳遞給建構函式，如下所示。

this.arrayName = ko.observableArray(['scott','jack']);

從可觀察陣列讀取

您可以按如下方式訪問可觀察陣列元素。

alert('The second element is ' + arrayName()[1]);

可觀察陣列函式

KnockoutJS 有一套自己的可觀察陣列函式。它們很方便，因為：

這些函式可在所有瀏覽器上執行。
這些函式將自動處理依賴項跟蹤。
語法易於使用。例如，要將元素插入陣列，您只需使用 arrayName.push('value') 而不是 arrayName().push('value')。

以下是各種可觀察陣列方法的列表。

序號	方法及描述
1	push('value') 在陣列末尾插入新項。
2	pop() 刪除陣列中的最後一項並返回它。
3	unshift('value') 在陣列開頭插入新值。
4	shift() 刪除陣列中的第一項並返回它。
5	reverse() 反轉陣列的順序。
6	sort() 按升序對陣列項進行排序。
7	splice(start-index,end-index) 接受 2 個引數 - start-index 和 end-index - 刪除從 start 到 end index 的項，並將它們作為陣列返回。
8	indexOf('value') 此函式返回提供的引數的第一次出現的索引。
9	slice(start-index,end-index) 此方法切出陣列的一部分。返回從 start-index 到 end-index 的項。
10	removeAll() 刪除所有項並將其作為陣列返回。
11	remove('value') 刪除與引數匹配的項，並將其作為陣列返回。
12	remove(function(item) { condition }) 刪除滿足條件的項，並將它們作為陣列返回。
13	remove([set of values]) 刪除與給定值集匹配的項。
14	destroyAll() 將陣列中所有項的 _destroy 屬性標記為 true。
15	destroy('value') 搜尋與引數相等的項，並將其標記為 _destroy 屬性，值為 true。
16	destroy(function(item) { condition}) 查詢所有滿足條件的項，將它們標記為 _destroy 屬性，值為 true。
17	destroy([set of values]) 查詢與給定值集匹配的項，將其標記為 _destroy 屬性，值為 true。

注意 - 可觀察陣列中的 Destroy 和 DestroyAll 函式主要供“Ruby on Rails”開發人員使用。

當您使用 destroy 方法時，相應的項不會立即從陣列中真正刪除，而是透過將它們的 _destroy 屬性標記為 true 來隱藏它們，以便 UI 無法讀取它們。標記為 _destroy 等於 true 的項將在以後處理 JSON 物件圖時刪除。

列印頁面