KnockoutJS - 宣告式繫結

KnockoutJS 中的宣告式繫結提供了一種將資料連線到 UI 的強大方法。

瞭解繫結和可觀察物件之間的關係非常重要。從技術上講，這兩者是不同的。您可以使用普通的 JavaScript 物件作為 ViewModel，並且 KnockoutJS 可以正確處理 View 的繫結。

如果沒有可觀察物件，則 UI 中的屬性將僅在第一次處理。在這種情況下，它無法根據底層資料更新自動更新。為了實現這一點，繫結必須引用可觀察屬性。

繫結語法

繫結由 2 個專案組成，即繫結名稱和值。以下是一個簡單的示例 -

Today is : <span data-bind = "text: whatDay"></span>

這裡，text 是繫結名稱，whatDay 是繫結值。您可以用逗號分隔多個繫結，如以下語法所示。

Your name: <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />

這裡，每次按鍵後都會更新值。

繫結值

繫結值可以是單個值、字面量、變數或JavaScript表示式。如果繫結引用了一些無效的表示式或引用，則 KO 將產生錯誤並停止處理繫結。

以下是幾個繫結示例。

<!-- simple text binding -->
<p>Enter employee name: <input   -bind = 'value: empName' /></p>

<!-- click binding, call a specific function -->
<button data-bind="click: sortEmpArray">Sort Array</button>

<!-- options binding -->
<select multiple = "true" size = "8" data-bind = "options: empArray , 
   selectedOptions: chosenItem"> </select>

注意以下幾點 -

空格沒有任何區別。
從 KO 3.0 開始，您可以跳過繫結值，這將為繫結提供一個未定義的值。

繫結上下文

當前繫結中使用的資料可以透過物件引用。此物件稱為繫結上下文。

上下文層次結構由 KnockoutJS 自動建立和管理。下表列出了 KO 提供的不同型別的繫結上下文。

序號	繫結上下文型別和描述
1	$root 這始終指的是頂級 ViewModel。這使得可以訪問用於操作 ViewModel 的頂級方法。這通常是傳遞給 ko.applyBindings 的物件。
2	$data 此屬性非常類似於 Javascript 物件中的this關鍵字。繫結上下文中的 $data 屬性指的是當前上下文的 ViewModel 物件。
3	$index 此屬性包含 foreach 迴圈內陣列中當前專案的索引。$index 的值將在底層可觀察陣列更新時自動更改。顯然，此上下文僅對foreach繫結可用。
4	$parent 此屬性指的是父 ViewModel 物件。當您想從巢狀迴圈內部訪問外部 ViewModel 屬性時，這很有用。
5	$parentContext 在父級繫結的上下文物件稱為$parentContext。這與$parent不同。$parent 指的是資料。而$parentContext指的是繫結上下文。例如，您可能需要從內部上下文中訪問外部 foreach 專案的索引。
6	$rawdata 此上下文在當前情況下儲存原始 ViewModel 值。這類似於 $data，但區別在於，如果 ViewModel 包裹在可觀察物件中，則 $data 僅解包。ViewModel 和 $rawdata 成為實際的可觀察資料。
7	$component 當您在特定元件內部時，此上下文用於引用該元件的 ViewModel。例如，您可能希望訪問 ViewModel 中的某些屬性而不是元件模板部分中的當前資料。
8	$componentTemplateNodes 當您在特定元件模板內時，這表示傳遞給該特定元件的 DOM 節點陣列。

以下術語也存在於繫結中，但實際上並非繫結上下文。

$context - 這不過就是現有的繫結上下文物件。
$element - 此物件指的是當前繫結中 DOM 中的元素。

處理文字和外觀

以下是 KO 提供的用於處理文字和視覺外觀的繫結型別列表。

序號	繫結型別和用法
1	visible: <繫結條件> 根據某些條件顯示或隱藏 HTML DOM 元素。
2	text: <繫結值> 設定 HTML DOM 元素的內容。
3	html: <繫結值> 設定 DOM 元素的 HTML 標記內容。
4	css: <繫結物件> 將 CSS 類應用於元素。
5	style: <繫結物件> 定義元素的內聯樣式屬性。
6	attr: <繫結物件> 動態地向元素新增屬性。

處理控制流繫結

以下是 KO 提供的控制流繫結型別列表。

序號	繫結型別和用法
1	foreach: <繫結陣列> 在此繫結中，每個陣列項都在 HTML 標記中迴圈引用。
2	if: <繫結條件> 如果條件為真，則處理給定的 HTML 標記。否則，它將從 DOM 中刪除。
3	ifnot: <繫結條件> If 的否定。如果條件為真，則處理給定的 HTML 標記。否則，它將從 DOM 中刪除。
4	with: <繫結物件> 此繫結用於在指定物件的上下文中繫結物件的子元素。
5	component: <元件名稱> 或 component: <元件物件> 此繫結用於將元件插入 DOM 元素並可選地傳遞引數。

處理表單欄位繫結

以下是 KO 提供的表單欄位繫結型別列表。

序號	繫結型別和用法
1	click: <繫結函式> 此繫結用於根據點選呼叫與 DOM 元素關聯的 JavaScript 函式。
2	event: <DOM 事件：處理程式函式> 此繫結用於偵聽指定的 DOM 事件並根據它們呼叫關聯的處理程式函式。
3	submit: <繫結函式> 此繫結用於在關聯的 DOM 元素提交時呼叫 JavaScript 函式。
4	enable: <繫結值> 此繫結用於根據指定條件啟用某些 DOM 元素。
5	disable: <繫結值> 當引數計算結果為真時，此繫結停用關聯的 DOM 元素。
6	value: <繫結值> 此繫結用於將相應 DOM 元素的值連結到 ViewModel 屬性。
7	textInput: <繫結值> 此繫結用於在文字框或文字區域和 ViewModel 屬性之間建立雙向繫結。
8	hasFocus: <繫結值> 此繫結用於透過 ViewModel 屬性手動設定 HTML DOM 元素的焦點。
9	checked: <繫結值> 此繫結用於在可檢查的表單元素和 ViewModel 屬性之間建立連結。
10	options: <繫結陣列> 此繫結用於定義 select 元素的選項。
11	selectedOptions: <繫結陣列> 此繫結用於處理在多列表選擇表單控制元件中當前選定的元素。
12	uniqueName: <繫結值> 此繫結用於為 DOM 元素生成唯一的名稱。

列印頁面