data-bind綁定語法

Knockout的聲明性綁定系統提供了一種簡潔而強大的方法來將數據鏈接到UI。 綁定到簡單的數據屬性或使用單個綁定通常是容易和明顯的。 對於更複雜的綁定，它有助於更好地瞭解Knockout的綁定系統的行為和語法。

綁定語法

綁定包含兩個項目，綁定名稱和值，用冒號分隔。 這裡是一個單一的簡單綁定的示例：

Today's message is: <span data-bind="text: myMessage"></span>

元素可以包括多個綁定（相關或不相關），每個綁定由逗號分隔。 這裡有些例子：

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />

綁定名稱通常應與註冊的綁定處理程式（內置或自定義）匹配，或者是另一綁定的參數。 如果名稱不匹配，Knockout將忽略它（沒有任何錯誤或警告）。 因此，如果綁定看起來不工作，首先檢查名稱是否正確。

綁定值

綁定值可以是單個值，變數或字面值或幾乎任何有效的JavaScript表達式。 下麵是各種綁定值的示例：

<!-- variable (usually a property of the current view model -->
<div data-bind="visible: shouldShowMessage">...</div>
 
<!-- comparison and conditional -->
The item is <span data-bind="text: price() > 50 ? 'expensive' : 'cheap'"></span>.
 
<!-- function call and comparison -->
<button data-bind="enable: parseAreaCode(cellphoneNumber()) != '555'">...</button>
 
<!-- function expression -->
<div data-bind="click: function (data) { myFunction('param1', data) }">...</div>
 
<!-- object literal (with unquoted and quoted property names) -->
<div data-bind="with: {emotion: 'happy', 'facial-expression': 'smile'}">...</div>

這些示例顯示該值可以只是關於任何JavaScript表達式。 即使逗號和括弧括在大括弧，括弧或括弧中。 當值是對象字面值時，對象的屬性名稱必須是有效的JavaScript標識符或用引號括起來。 如果綁定值是無效表達式或引用未知變數，Knockout將輸出錯誤並停止處理綁定。

帶空格的綁定寫法

綁定可以包含任意數量的空格（空格，製表符和換行符），因此您可以隨意使用它來根據需要排列綁定。 以下示例均等效：

<!-- no spaces -->
<select data-bind="options:availableCountries,optionsText:'countryName',value:selectedCountry,optionsCaption:'Choose...'"></select>
 
<!-- some spaces -->
<select data-bind="options : availableCountries, optionsText : 'countryName', value : selectedCountry, optionsCaption : 'Choose...'"></select>
 
<!-- spaces and newlines -->
<select data-bind="
    options: availableCountries,
    optionsText: 'countryName',
    value: selectedCountry,
    optionsCaption: 'Choose...'"></select>

無值綁定

從Knockout 3.0開始，您可以指定沒有值的綁定，這將給綁定一個未定義的值。 例如：

<span data-bind="text">Text that will be cleared when bindings are applied.</span>

當與綁定預處理配合使用時，此功能特別有用，可以為綁定分配預設值。

綁定上下文

綁定上下文是保存您可以從綁定引用的數據的對象。 在應用綁定時，Knockout自動創建和管理綁定上下文的層次結構。 層次結構的根級別是指您提供給ko.applyBindings（viewModel）的viewModel參數。 然後，每次使用控制流綁定（如with或foreach）時，都會創建引用嵌套視圖模型數據的子綁定上下文。

綁定上下文提供以下特殊屬性，您可以在任何綁定中引用：

• $parent

  這是父上下文中的視圖模型對象，即緊接在當前上下文之外的視圖模型對象。 在根上下文中，這是未定義的。 例：

  <h1 data-bind="text: name"></h1>
  
  <div data-bind="with: manager">
  
  <!-- Now we're inside a nested binding context -->
  
  <span data-bind="text: name"></span> is the
  
  manager of <span data-bind="text: $parent.name"></span>
  
  </div>

• $parents

  這是一個表示所有父視圖模型的數組：

  $ parents [0]是來自父上下文的視圖模型（即，它與$ parent相同）

  $ parents [1]是祖父上下文的視圖模型

  $ parents [2]是祖父的祖父母上下文的視圖模型

  … and so on.

• $root

  這是根上下文中的主視圖模型對象，即最頂層父上下文。 它通常是傳遞給ko.applyBindings的對象。 它等價於$ parents [$ parents.length - 1]。

• $component(未來章節詳細介紹)

  如果你在特定組件模板的上下文中，那麼$ component引用該組件的viewmodel。 它是特定於組件的等價於$ root。 在嵌套組件的情況下，$ component指的是最近組件的viewmodel。

  這是有用的，例如，如果組件的模板包含一個或多個foreach塊，其中您希望引用組件視圖模型上的某些屬性或函數，而不是當前數據項。

• $data

  這是當前上下文中的視圖模型對象。 在根上下文中，$ data和$ root是等效的。 在嵌套綁定上下文中，此參數將設置為當前數據項（例如，在with：person綁定內，$ data將設置為person）。 $ data在你想引用viewmodel本身時很有用，而不是viewmodel上的一個屬性。 例：

  <ul data-bind="foreach: ['cats', 'dogs', 'fish']">
  
  <li>The value is <span data-bind="text: $data"></span></li>
  
  </ul>

• $index (僅在foreach綁定中可用)

  這是由foreach綁定呈現的當前數組條目的從零開始的索引。 與其他綁定上下文屬性不同，$ index是一個observable，並且只要項目的索引發生更改（例如，如果項目添加到數組或從數組中刪除），就會更新。

• $parentContext

  這指的是父級別的綁定上下文對象。 這與$ parent不同，$ parent指的是父級別的數據（非綁定上下文）。 例如，如果您需要從內部上下文（用法：$ parentContext。$ index）訪問外部foreach項的索引值，這是有用的。 在根上下文中未定義。

• $rawData

  這是當前上下文中的原始視圖模型值。 通常這將與$ data相同，但是如果提供給Knockout的視圖模型包裝在一個observable中，那麼$ data將是展開的視圖模型，$ rawData將是observable本身。

• $componentTemplateNodes

  如果你在特定組件模板的上下文中，那麼$ componentTemplateNodes是一個包含傳遞給該組件的任何DOM節點的數組。 這使得容易構建接收模板的組件，例如接受模板以定義其輸出行的網格組件。 有關完整的示例，未來章節講詳細介紹。

以下特殊變數也可在綁定中使用，但不是綁定上下文對象的一部分：

• $context

  這指的是當前綁定上下文對象。 如果要訪問上下文的屬性（如果它們也可能存在於視圖模型中），或者如果要將上下文對象傳遞到視圖模型中的輔助函數，則這可能很有用。

• $element

  這是元素DOM對象（對於虛擬元素，它將是註釋DOM對象）當前綁定。 如果綁定需要訪問當前元素的屬性，這可能很有用。 例：

  <div id="item1" data-bind="text: $element.id"></div>

控制或修改自定義綁定中的綁定上下文

就像使用foreach的內置綁定一樣，自定義綁定可以更改其後代元素的綁定上下文，或通過擴展綁定上下文對象來提供特殊屬性。 這將在創建控制後代綁定的自定義綁定章節中進行詳細描述。

章節結語

在以後章節中，將會介紹到KnockoutJS3.X的高級應用，盡請期待，感謝閱讀。支持的話請點一波關註和推薦。謝謝