KnockoutJS(3)-綁定語法


綁定語法大致分為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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM