KnockoutJS(3)-綁定文法

標籤：style   blog   http   io   color   ar   os   使用   java   

綁定文法大致分為2種：

1. 資料繫結(data-bind syntax)

2. 綁定上下文(Binding Context)

 

下面針對這2中綁定文法分別介紹一下

1. 綁定上下文(Binding Context)

一個綁定文法由兩部分組成：綁定的名字和值，他們之間使用“:”進行隔開。

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

View Code

一個標籤中我們可以使用多個綁定（多個綁定之間可以相關也可以不相關），此時這些綁定之間使用","進行隔開，比如：

<!-- 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" />

View Code

綁定文法中的值可以是單個值，也可以是一個變數，也可以是一段文字，同時也可以是一段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>

View Code

如果我們在一個標籤中綁定多個元素時，這些元素之間會互相影響的，此時我們在使用的時候要注意以下兩點：

（1）、綁定執行的順序是從左向右的。

（2）、當Model層的資料改變是，綁定到同一個標籤上的值都會改變。

 

2. 綁定上下文(Binding Context)

一個Binding Context是一個對象，在他們中儲存著資料，這些資料我們又可以在我們的綁定文法中去使用。當我們使用屬性綁定時，Knockoutjs會自動的建立和管理具有等級之分的Binding Context。當我們使用ko.applyBindings(viewModel)的時候，Knockoutjs就會建立root等級指向viewModel的參數。接著，如果你使用了with或者foreach時，Knockoutjs就會建立child binding context指向嵌套的View Model Data。Binding Context為我們提供了以下的屬性可供我們在綁定文法中任意使用。

（1）、$parent

這個視圖模型對象代表了他的父上下文，代表當前內容相關的外部。在root context中，此屬性還沒有進行定義。例如：

<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>

View Code

（2）、$parents

此屬性代表了所有的parent屬性。

$parents[0]:代表的是上一個View Model，和$parent相同

$parents[1]:代表的是上上一個View Model

$parents[2]:代表的是上上上一個View Model

這樣依次往下推就行了。

（3）、$root

這個是最重要的view model object在root context中，是最上層的parent content，我們也可以使用$parents[$parents.length-1]替換。

（4）、$data

代表當前的view model，如果此時在根部的話，則$data和$root是相等的。如果你不想引用一個view model的屬性而想引用一個view model本身時，

$data則是非常有用的：

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

View Code

（5）、$index

此屬性只在foreach標籤中有用，他的值是從0開始的。

（6）、$parentContext

此標籤和$parent是有區別的，$parent代表的是上層的view model，$parentContext代表的是上層的具體的資料，比如引用上層的index，使用$parentContext.$index。

下面的兩個標籤在屬性綁定時也是可以使用的，但他們並不是binding context中的一員。

（1）、$context:指向當前的binding context object

（2）、$element

這是當前屬性綁定的DOM對象，如果我們想要引用當前標籤的屬性值的時候我們則可以使用此屬性。

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

View Code

 

KnockoutJS(3)-綁定文法