AngularJS 高性能绑定,使用原生的一些指令，可能对性能优化不好冻结UI。在AngularJS中，如果超过2000个watches，会影响到UI的更新。
bo-* 替换 ng-*除了前者只计算一次，其余的工作方式都一致。
使用方法
- 下载，克隆，或者使用 bower:
bower install angular-bindonce - 将 bindonce.js 添加到应用中
- 将
pasvaz.bindonce作为模块依赖添加到app中，amgular.module('app', ['pasvaz.bindonce'])
示例
不使用bindonce的用法：
// angularJS会添加很多watches
<tr ng-repeat="person in Persons" ng-class="{'male':person.gender=' M', 'female': person.gender=='F'}">
<td ng-bind="$index + 1"></td>
<td></td>
<td ng-bind="person.firstname"></td>
<td ng-bind="person.lastname"></td>
<td ng-bind="person.gender"></td>
<td>
<a ng-href="{{person.url}}">
<spam ng-bind="(person.url)?'link':'missing'" ng-class="{'label label-important': !person.url}"></spam>
</a>
</td>
</tr>
如果使用bindonce,则将 ng- 开头的，除了 ng-repeat 以外的，都替换为 bo-,另外将 bindonce 到 ng-repeat 所在的标签
// angularJS 只添加一个watch: ngRepeatWatch
<tr bindonce ng-repeat="person in Persons" bo-class="{'male':person.gender=' M', 'female': person.gender=='F'}"> <!-- 添加bindonce -->
<td bo-bind="$index + 1"></td>
<td></td> <!-- bo-src不需要使用 '{{}}' -->
<td bo-bind="person.firstname"></td>
<td bo-bind="person.lastname"></td>
<td bo-bind="person.gender"></td>
<td>
<a bo-href="person.url"> <!-- bo-href 不需要使用 '{{}}' -->
<spam bo-bind="(person.url)?'link':'missing'" bo-class="{'label label-important': !person.url}"></spam>
</a>
</td>
</tr>
bindonce 结合 ngRepeat 使用时，不需要赋值，因为 ngRepeat 只有数据存在时才创建指令。
智能方式
bindonce还解决了一个问题，指令渲染内容时，数据已经存在。通常Angular使用指令，如果数据还不能获取，指令就不能渲染内容，页面一片空白，而bindonce能等待数据准备好了再去渲染内容。
<span my-custom-set-text="Person.firstname"></span>
<span my-custom-set-text="Person.lastname"></span>
...
// js
angular.module('myApp', [])
.directive('myCustomSetText', function() {
return {
link: function(scope, element, attr, ctrl) {
element.text(scope.$eval(attr.myCustomSetText));
}
};
});
指令按照想象的方式运行，渲染 'Person' 数据，不需要使用watchers。如果在 $scope中 'Person' 还不能获取(比如通过$http或$resource方式获取Person),此时指令没有用处， 'scope.$eval(attr.myCustomSetText)'则什么也不渲染。
下面就是bindonce如何解决这个问题的:
// 等待Person数据带来之后再渲染
<div bindonce="Person" bo-title="Person.title">
<span bo-text="Person.firstname"></span>
<span bo-text="Person.lastname"></span>
<p bo-class="{'fancy': Person.isNice}" bo-html="Person.story"></p>
</div>
Interpolation
一些指令(ng-href, ng-src) 使用插值，比如： ng-href="/profile/{{User.profileId}}"。 ng-href 和 ng-src 拥有相对于的指令: bo-href-i, bo-href-i(注意 i 表示 'interpolate')。bindonce不使用watches,而AngularJS每次插值的时候都使用一个watch。 新版本的bo-href, bo-src不会添加watch,bo-href-i, bo-href-i为了兼容性问题仍在使用,这2个属性也添加一个watch。
属性使用
下面罗列一些bindonce指令：``
-
bo-text='text': 计算'text'，不添加watches, 并将文本添加到元素内， 比如<span bo-text="Person.name"></span> -
bo-bind='text':bo-text的别名，等同于bo-bind -
bo-href-i: 等同于ng-href, 都创建一个watch,为兼容性而存在, 比如<a bo-href-i="/profile{{Person.id}}"></a> -
bo-href: 同上，就是不创建watch -
bo-src-i='url':, 创建一个watch,为兼容性而存在，否则使用bo-src -
bo-src: 不创建watch,注意不能使用{{}}用来插值， -
bo-class="object/string": 等同于 'ng-class' -
bo-id="#id": 计算#id的值，并将id渲染给元素 -
bo-value="expression": 计算表达式的值，并当作value渲染给元素，<input type="radio" bo-value="value"> -
bo-attr bo-attr-foo="text": 计算'text'的值，当作元素自定义属性渲染，<div bo-attr bo-attr-foo="bar"></div>
总结
使用bindonce的最大特定就是不添加watch(当然部分还是添加，比如'bo-src-i', 'bo-href-i')，使用方式基本和angularjs原生的一致。
