Ember.js データとテンプレートのバインディング #JavaScript

今日は、Ember.js によるデータとテンプレートのバインディングの方法を説明します。

Ember.jsアプリケーションは、Handlebarsテンプレートエンジンを使って、HTMLへの値の埋め込みを記述します。
他のMVCフレームワークと同様、表示要素の単位をViewと呼びます。
Ember.jsのViewは、Handlebarsテンプレートと、Ember.Viewを継承したクラスのインスタンスから構成されます。Viewクラスは表示に必要な情報をメンバとして持ち、テンプレートは情報の表示方法を記述します。

実際のサンプルを見てみましょう。

var App = Ember.Application.create();

App.ApplicationView = Ember.View.extend({
  lhs: 6, 
  rhs: 7,
  answer: function () {
    return this.get('lhs') * this.get('rhs');
  }.property('lhs', 'rhs')
});

ネームスペースとしてEmber.Applicationクラスのインスタンスを作成します。これはお約束です。
次にEmber.Viewを継承したViewクラスを定義します。answerメンバは、昨日説明したバインディング機能の一種、プロパティとして記述しています。
名前をApplicationViewという名前にしておくと、名前をつけてないテンプレートに対して自動的に結びつけ、アプリケーション初期化時にインスタンスを作成して描画してくれるようです。この動作は現状ドキュメントには書いてない気がします。

次に、このViewクラスの情報を表示するHandlebarsテンプレートを見ていきます。

  <script type="text/x-handlebars">
    {{view Ember.TextField valueBinding="lhs"}}

    *

    {{view Ember.TextField valueBinding="rhs"}}

    = 

    {{answer}}
  </script>

{{ }} で囲んでる部分が、バインディングの定義です。一般のテンプレートエンジンと同様、ここにデータを埋め込むわけですが、Ember.jsのテンプレートは、値が更新されたタイミングで自動で表示を更新してくれます。

今回のサンプルだと、lhs, rhsの入力欄からユーザが値を変更すると、自動でApplicationViewのそれぞれのメンバの値が更新されます。さらに、これらのメンバを参照するように定義されているanswerの値も更新され、answerの値を埋め込んでいるテンプレートの表示も更新されます。

これを利用することで、DOMイベントのハンドラ、DOM情報の更新処理を全く書いていないにも関わらず、動的に計算結果表示を更新するアプリケーションを作成できます。

では実際にサンプルの動作を体験してみてください。

データバインディングの強力さを実感していただけたのではないでしょうか。