一、理解雙向數(shù)據(jù)綁定和監(jiān)聽器

為了實現(xiàn)雙向數(shù)據(jù)綁定，AngularJS使用了$watch API來觀察期作用域中的模型變化。具體的作用域取決于你的代碼如何編寫。如果你沒有創(chuàng)建一個自作用域，就是說沒有使用ngController指令在你的DOM和你的控制器代碼之間創(chuàng)建一個關(guān)聯(lián)，你可能處理的是跟作用域$rootScope，這個作用域由ngApp自動創(chuàng)建，并且是應(yīng)用中所有作用域的父作用域，當然，如果你選擇手動啟動AngularJS，那情況就另當別論了。每當你創(chuàng)建了一個數(shù)據(jù)綁定時，AngularJS就會自動創(chuàng)建一個監(jiān)聽器來監(jiān)聽這個數(shù)據(jù)的變化。比如說下面這個簡單的例子:

<p>Hello {{name}}!</p>

在這個例子中，我們使用了插值指令，這個指令會注冊一個監(jiān)聽器來監(jiān)聽相應(yīng)作用域中屬性name的變化，并在該屬性發(fā)生變化時將它實時反應(yīng)到DOM中。

添加下面的代碼，你的name屬性將會自動的被賦值為Pascal：

angular.module('myApp', []) 
 .run(function ($rootScope) { 
  $rootScope.name = "Pascal"; 
}]); 

 通過上面的代碼，我們就成功的使用了插值指令創(chuàng)建了在試圖上創(chuàng)建了一個數(shù)據(jù)綁定?，F(xiàn)在，如果name屬性發(fā)生變化，視圖將會自動發(fā)生更新。比如說我們添加下面的代碼，在按鈕點擊是修改name的值:

<button ng-click="name = 'Christoph'">Click me!</button> 

  此時，點擊按鈕，我們可以將name的值修改為Christoph，同時我們會觸發(fā)一個$digest循環(huán)來更新DOM中相應(yīng)的部分。在上面的例子中，你看的知識單向數(shù)據(jù)綁定。然而，你完全可以使用ngModel指令來將視圖中發(fā)生的變化實時的反應(yīng)到模型中。

上面的雙向綁定魔法的實現(xiàn)完全依賴于$digest循環(huán)，當$digest循環(huán)被觸發(fā)時，AngularJS將會去處理遍歷當前作用域和子作用域中的所有監(jiān)聽器，然后通過檢查模型中發(fā)生的變化來更新DOM中的值，直到模型不再發(fā)生變化為止。一旦$digest循環(huán)執(zhí)行完成，瀏覽器會重新渲染DOM來反應(yīng)模型數(shù)據(jù)變化。

 現(xiàn)在，我們大概了解了AngularJS的數(shù)據(jù)綁定機制，你可能會問我們?yōu)楹芜€需要一次性數(shù)據(jù)綁定。

由于AngularJS使用監(jiān)聽器來實現(xiàn)數(shù)據(jù)綁定。當監(jiān)聽器越來越多時，可能會出現(xiàn)一些性能上的問題。由于在注冊監(jiān)聽器使，同時會注冊一個回調(diào)函數(shù)，以便在$digest循環(huán)執(zhí)行時能夠相應(yīng)的更新視圖。也就是說，監(jiān)聽器越多，AngularJS需要處理的回調(diào)函數(shù)也就越多。

現(xiàn)在假設(shè)在視圖中有很多值需要被AngularJS處理。比如說像上面使用插值指令來進行數(shù)據(jù)綁定，雖然我們可能并不想讓這個值只綁定一次，比如說上面的Pascal，在應(yīng)用代碼執(zhí)行的整個過程中這個屬性都不會發(fā)生改變，但是AngularJS默認依然會在這個屬性上綁定一個監(jiān)聽器和回調(diào)函數(shù)。因此，在$digest時，AngularJS依然會去特意的關(guān)注這個值，這實在是有些過頭了。

二、一次性數(shù)據(jù)綁定(One-time bindings)

這就是我們需要一次性數(shù)據(jù)綁定的原因。在AngularJS的文檔中，我們可以清楚的了解到這個新特性的作用:一次性數(shù)據(jù)綁定表達式可以在數(shù)據(jù)穩(wěn)定之后，不需要在$digest循環(huán)中重計算…

一次性數(shù)據(jù)綁定的出現(xiàn)解決了前面提到的由監(jiān)聽器太多帶來的性能問題。那么我們應(yīng)該如何使用一次性數(shù)據(jù)綁定呢？

使用一次性數(shù)據(jù)綁定非常的簡單，我們只需要在表達式之前加上雙冒號::即可。比如，前面我們使用了插值指令將name屬性綁定到了視圖中:

<p>Hello {{name}}!</p> 

使用一次性數(shù)據(jù)綁定，我們這樣寫:

<p>Hello {{::name}}!</p> 

在AngularJS 1.3版本中，你可以在任何AngularJS的表達式中使用一次性數(shù)據(jù)綁定。即使在諸如ng-repeat這樣嚴重依賴于雙向綁定的指令中，你依然可以使用它。

以上所述是小編給大家介紹的AngularJS中的一次性數(shù)據(jù)綁定 (bindonce)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論