AngularJS 1.3 新機能 ワンタイムバインディング

AngularJS 1.3.0 で導入された新機能から、ワンタイムバインディング (One-time binding) について取り上げます。

One-time binding

値が変わることのないデータまでも双方向データバインドされて、digest loop のたびに繰り返し変更監視されることで性能が劣化しやすかった大規模な AngularJS アプリケーションでの問題を解消できます。

1 回で使い捨てするデータバインドを定義できるようになり、監視 (watch) 対象を減らして digest loop を高速化し、アプリケーションの表示や操作の応答速度を高められる機能です。

One-time binding を指定すると、undefined のままである間は監視対象となり続け、digest loop の結果 undefined でなくなった時点で監視対象から外れます。null となった場合でも監視対象から外れます。

使い方

:: を付けるだけです。

1
2
3
4
5
6
7
8
// {{ ... }} の例
{{::user.name}}

// 属性の例
<div ng-bind="::user.name">

// ng-repeat の例
<li ng-repeat="result in ::results">{{::result.title}}</li>

ng-repeat への指定は配列に対して有効であって、配列に格納されているオブジェクトのプロパティ個々に対しては、それぞれで必要に応じて “ などと one-time binding を指定することになります。

Bindonce

「そもそもこういう性能改善系の機能こそ JavaScript の実行速度が遅い IE 8 でこそ必要なのに、AngularJS 1.3 では IE 8 サポートがドロップされたし…。IE 8 をサポートしなきゃいけない自分には AngularJS 1.3 リリースなんかで盛り上がれやしないよ!」

とお嘆きのあなたには、Bindonce です!

しばらく IE 8 をサポートし続けていくのであれば、この Bindonce の導入を検討しましょう。AngularJS 1.3.0 の新機能 One-time binding と同じように性能を改善できます。

使い方

bindonce.js (bindonce.min.js) ファイルを読み込み、angular.module('app', ['pasvaz.bindonce']) というように 'pasvaz.bindonce' を依存モジュールとして定義し、以下のようにコードを記述して使います。

1
2
3
4
5
6
7
<ul>
  <li bindonce ng-repeat="person in Persons">
    <a bo-href="'#/people/' + person.id"><img bo-src="person.imageUrl"></a>
    <a bo-href="'#/people/' + person.id" bo-text="person.name"></a>
    <p bo-class="{'cycled':person.generated}" bo-html="person.description"></p>
  </li>
</ul>

bindonce とか、bo-* で始まる directive に注目してください。