angularjs入門-1.3後的新功能 one-time bindings和ng-model-options
angularjs最方便也最另人稱之為奇的功能，就是two way binding了，那為何1.3之後又會出現one-time-binding呢?其實angularjs的two way binding也是雙面刃，我們可以想像一下，如果我每key一個字，畫面上的dom就會自動繫結一次的話，這也是會損耗效能的，這其實也考驗著客戶端的電腦，雖然現在電腦的效能都越來越好，也越來越便宜，這方面的事情倒也不一定要特別的去在意，但如果我們有所了解，知道什麼時候其實根本不需要two way binding，也是非常有幫助的，至於以筆者實際開發的經驗來說，我也不是時時刻刻的去注意，但如果有些時候確實不需要binding的時候，我們就可以去把這特性給改掉，比如說修改的時候，我們可能只要按下儲存之後，會去跟web api要回修改的資料來更新畫面，這樣子的例子，我們就不太需要two way binding，如下範例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-app="App">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="emp.name" class="form-control" />
<input type="text" ng-model="emp.sex" class="form-control" />
<hr />
<ul ng-repeat="item in people">
<li><input type="button" value="修改" ng-click="editClick(item)" class="btn btn-primary" /> {{item.name}}-{{item.sex}}</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('App', [])
.controller('FirstCtrl', function ($scope) {
$scope.people = [
{ name: 'anson', sex: 'boy' },
{ name: 'andy', sex: 'boy' },
{ name: 'coco', sex: 'girl' },
{ name: 'lucky', sex: 'dog' },
{ name: 'micky', sex: 'mouse' },
]
$scope.editClick = function (item) {
$scope.emp = item;
}
});
</script>
</body>
</html>
我們可以注意一下，按了修改把值帶回textbox，但是我在修改的時候，下面的值也同時更新，這是一種有點奇怪的行為，當然因為我這邊沒有真正去儲存資料庫，所以我並沒有多給一個儲存按鈕，實際上我們應該是按完儲存再更新下面的值，這時候就可以用one time binding了，而這也非常簡單，只要使用{{::item.name}}就可以了，其實one time binding最適合使用的時機也正是陣列資料要逐筆顯示出來的時候，如果資料一大，又沒做分頁效果的話，不是繪製得太慢，不然就是瀏覽器撐不住而當掉，雖然不太可能有不做分頁的時候，但使用者的要求千奇百怪，可能希望不做分頁方便一次看完，又要能好幾個欄位能做模糊搜尋，資料量又大又只key一個字去搜尋的話，瀏覽器掛掉是非常有可能發生的事情，而如下就是使用one time binding的語法
<input type="text" ng-model="emp.name" class="form-control" />
<input type="text" ng-model="emp.sex" class="form-control" />
<hr />
<ul ng-repeat="item in people">
<li><input type="button" value="修改" ng-click="editClick(item)" class="btn btn-primary" /> {{::item.name}}-{{::item.sex}}</li>
</ul>
</div>而另外一個ng-model-options的做用，就是我們不希望每key一個字，就會隨時去watch偵測我們的值，我們可能只需要離開此input的時候，再binding一次的時候，這個就能派上用場了，比如像上面的例子，我不使用one-time-binding，但我希望輸入完值跳到下一個textbox的時候，就能馬上更新下面的值，如下例子
<input type="text" ng-model="emp.name" ng-model-options="{updateOn:'blur'}" class="form-control" />
<input type="text" ng-model="emp.sex" ng-model-options="{updateOn:'blur'}" class="form-control" />
<hr />
<ul ng-repeat="item in people">
<li><input type="button" value="修改" ng-click="editClick(item)" class="btn btn-primary" /> {{item.name}}-{{item.sex}}</li>
</ul>
</div>
關鍵就在下面這個語法
強烈建議大家要實際動手實作看看，才比較能知道這樣做或那樣做的效果會是什麼哦，以上再請大家多多指教囉。
