条件句 – Ember.js入門(6)

Ember.js入門

#JavaScript

#Ember.js

#RIA

渡辺修司

2013.09.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Ember.js入門の6回目は条件句、いわゆるifとかunlessです。それほど難しい話題でもないのでサクサクといきましょう。

バインディングと条件句

Ember.jsでは他のテンプレートエンジンと同様にModelやControllerのプロパティを参照し、特定のタグを表示したり、しなかったりする制御を行うことができます。Ember.jsでは、さらに特徴的な機能があり、条件句の判定値も自動的にバインディングされ、変更されると自動的に再描画されます。

開いて閉じるアプリケーション

今回作成するアプリケーションは、ボタンをクリックするとリストが展開され、Closeボタンが表示されるアプリケーションです。Closeボタンをクリックすると最初の状態に戻ります。

Controllerを実装する

前回と同様に、Controllerを定義して、プロパティとアクションを定義します。

window.App = Ember.Application.create();
App.ApplicationController = Ember.ObjectController.extend({
  expanded: false,
  actions: {
    expand: function() {
      this.set('expanded', true);
    },
    collapse: function() {
      this.set('expanded', false);
    }
  }
});

アプリケーションの状態

アプリケーションには、リストが展開されている状態と展開されていない状態があります。これをControllerのexpandedプロパティに真偽値として定義しました。

アクションの定義

アクションは、リストを展開するアクション（expand）と、閉じるアクション（collapse）のふたつを定義します。それぞれのイベントハンドラーでは、expandedプロパティを設定しているだけです。リストに対して、hideメソッドなどを実行していないことがポイントです。

Viewを定義する

Viewの定義方法は幾つかあると思いますが、今回は最も単純な記法で、リストが展開している状態としていない状態の両方を定義し、{{if}}ヘルパーを利用して表示を切り替えました。

  <h1>Conditionals</h1>
  {{#if expanded}}
  <div>
    <ul>
      <li>Spring MVC</li>
      <li>Grails</li>
      <li>Ruby on Rails</li>
    </ul>
    <span style="background:#004;color:#FFF;padding:4px;" {{action 'collapse'}}>Close</span>
  </div>
  {{else}}
  <div>
    <span style="background:#008;color:#FFF;padding:4px;" {{action 'expand'}}>Show list</span>
  </div>
  {{/if}}

{{#if}}と{{/if}}が対応している件はかなりキモイですが、タグが対応しているというイメージです。{{else}}も含まれていてさらにキモイですが、あくまでViewの表示ロジックでしかない点、これ以上の複雑な条件を設定しないようにして我慢しましょう。なお、マスコットキャラもキモイです。

expandedの初期値はfalseなので、レンダリング結果は、期待するようにelse句側となります。

なお、{{action}}ヘルパーにはbuttonだけではなく、このようにdivやspanタグなども利用できます。

アクションによる自動更新

実際に実行し、Show listをクリックしてみると、リストが展開されCloseが表示されます。つまり、expandedプロパティが更新された（setメソッドを使います）ことをトリガーとしてテンプレートの再描画が行われています。Ember.jsを利用しない場合は、updateUIメソッドなどを作成し、各コンポーネントをhideしたりshowしたりとしなければいけませんが、Ember.jsを利用すればこんな簡単な記述で実現出来るのです。

勿論、Closeすれば最初の状態に戻ります。

条件句の補足

{{if}}ヘルパーだけでなく{{unless}}ヘルパーもあるので、条件となるプロパティが偽の場合も同様に利用できます。また、条件となるプロパティは真偽値だけではなく、オブジェクトや配列でも利用できます。オブジェクトの場合はnullの時に偽、配列の場合はサイズが0の時に偽として動作します。

  {{#unless items}}
  <p>カートの商品は空です。</p>
  {{/unless}}

まとめ

Ember.jsの自動バインディングは条件句にも適用されます。このため、条件句で表示するHTMLを切り替えるコードは簡単に実装できます。

最後にコード全体を掲載します。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>条件句 - Ember.js</title>
</head>
<body>
	<script type="text/x-handlebars">
  <h1>Conditionals</h1>
  {{#if expanded}}
  <div>
    <ul>
      <li>Spring MVC</li>
      <li>Grails</li>
      <li>Ruby on Rails</li>
    </ul>
    <span style="background:#004;color:#FFF;padding:4px;" {{action 'collapse'}}>Close</span>
  </div>
  {{else}}
  <div>
    <span style="background:#008;color:#FFF;padding:4px;" {{action 'expand'}}>Show list</span>
  </div>
  {{/if}}
	</script>
	<script type="text/javascript" src="js/libs/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="js/libs/handlebars-1.0.0.js"></script>
	<script type="text/javascript" src="js/libs/ember-1.0.0.js"></script>
	<script type="text/javascript">
window.App = Ember.Application.create();
App.ApplicationController = Ember.ObjectController.extend({
  expanded: false,
  actions: {
    expand: function() {
      this.set('expanded', true);
    },
    collapse: function() {
      this.set('expanded', false);
    }
  }
});
	</script>
</body>
</html>

http://emberjs.com/guides/templates/conditionals/