Ember.js 組み込みViewヘルパ

今日は、Ember.jsに組み込みで用意されているViewヘルパを見ていきます。

{{action}}

DOMイベントへのイベントハンドラの設定を行います。

<a href="#" {{action "edit" on="click"}}>Edit</a>

このテンプレート記述は、clickイベントが発生したら、edit()メソッドを実行することを指定しています。
Viewクラスの記述は、以下の例のようにedit()メソッドを実装していることを期待します。

App.ListingView = Ember.View.extend({
  templateName: 'listing',
  edit: function(event) {
    event.view.set('isEditing', true);
  }
});

{{bindAttr}}

属性値に対してデータバインディングします。

<img {{bindAttr src="logoUrl"}} alt="Logo">

Boolean値をバインドすると、その属性のON/OFFを切り替えます。

App.InputView = Ember.View.extend({
  isDisabled: true
});

こういうViewクラスに対して、

<input type="checkbox" {{bindAttr disabled="isDisabled"}}>

こういうテンプレートを記述すると、disabledのON/OFFをisDisabledの値で切り替えます。
以下のようなHTMLを描画します。(データバインディングのためのマーカは省いています)

<input type="checkbox" disabled>

{{debugger}}

ブレークポイントを仕掛け、デバッガを起動します。

{{#each}}

配列値をイテレートします。

<ul>
  {{#each people}}
    <li>Hello, {{name}}!</li>
  {{/each}}
</ul>

{{#each App.peopleController}}
  {{#view App.PersonView}}
    {{firstName}} {{lastName}}
  {{/view}}
{{/each}}

{{#if}} {{else}} {{#unless}}

テンプレートに制御構造を与えます。

{{#if person}}
  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!
{{else}}
  Please log in.
{{/if}}

評価値の判定方法は、false, undefined, null, [] なら否とみなします。

{{log}}

console.logで出力します。printfデバッグに便利。

{{log firstName}}

{{template}}

サブテンプレートを挿入します。
テンプレートを分割するだけなら、これで良いみたい。

<script type="text/x-handlebars">
  {{#with loggedInUser}}
    Last Login: {{lastLogin}}
    User Info: {{template "user_info"}}
  {{/with}}
</script>
<script type="text/x-handlebars" data-template-name="user_info">
  Name: <em>{{name}}</em>
  Karma: <em>{{karma}}</em>
</script>

{{unbound}}

データバインディングせずに、値を埋め込みます。
つまり、値が更新されても表示は更新されなくなります。
これは、パフォーマンスの改善のために利用します。

{{#view}} {{view}}

子供Viewを挿入します。

{{view App.SubView}}

{{#view}}ヘルパを使うことで、子供Viewのテンプレートを埋め込むことができます。

{{#view App.SubView}}
  {{view.firstName}}
  {{view.lastName}}
{{/view}}

{{#with}}

変数スコープを、指定したオブジェクトのコンテキストに切り替えます。

<b>{{person.firstName}} {{person.lastName}}</b>!
<br>
{{#with person}}
  <b>{{firstName}} {{lastName}}</b>!
{{/with}}

今日はドキュメントに書いてる内容、ほぼそのままの紹介になりました。
発見も多かったです。