Ember.jsについて学んだので、忘れないよう備忘録を残したいと思います。
#準備
以下のライブラリをダウンロード
- jquery
- handlebars
- ember
今回私が落としたスクリプトは次のものです。
- jquery-2.1.1.min.js
- handlebars-v1.3.0.js
- ember.js
これらをlibsディレクトリの下に置きます。
またlibsと同じディレクトリ内にtest.htmlを作成し、次の内容で保存する。
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<script src="libs/jquery-2.1.1.min.js"></script>
<script src="libs/handlebars-v1.3.0.js"></script>
<script src="libs/ember.js"></script>
<script src="libs/test.js"></script>
</head>
<body>
</body>
</html>
またtest.jsをlibsとtest.htmlと同じディレクトリ内に作成し、次の内容を保存する。
test.js
App = Ember.Application.create();
Appの部分は任意の文字を付けることができる。
ここではアプリケーッションの初期化を行っています。
この記述がないと画面に何も表示されないので注意が必要。
ファイル構成は次のようになる。
file
.
├─test.html
├─test.js
└─libs
├─ember.js
├─handlebars-v1.3.0.js
└─jquery-2.1.1.min.js
これで準備は完了です。
#Templateとは?
test.htmlを編集する前にTemplateについて説明したい。
TemplateはUIとして画面に表示されるHTMLの定義らしい。
test.htmlのbodyタグ内に次を追加します。
test.html
<script type="text/x-handlebars">
<p>Ember.js学んでるお!</p>
<p>私の名前は{{name}}です。</p>
<p>{{input value = name}}</p>
</script>
実行すると次の文字が出力される。
browser
Ember.js学んでるお!
私の名前はです。
┌──────────┐
└──────────┘
テキスト入力欄に文字を書き込むと自動的にHTMLを書き換えてリアルタイムで変更を表示してくれる。
これはEmber.jsの特徴の1つである。
TemplateはHandlebarsを使って記述しています。
{{}}で囲まれた部分にオブジェクトのプロパティ、ヘルパーを埋め込むことができる。
{{name}}内のnameはプロパティで、{{name}}に対応した文字列や値が入ります。
その下の{{input value = name}}はHandlebarsのヘルパー関数です。
これで入力された文字列がnameに入り、{{name}}に入力された文字列が入り画面が更新されます。
#コード
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<script src="libs/jquery-2.1.1.min.js"></script>
<script src="libs/handlebars-v1.3.0.js"></script>
<script src="libs/ember.js"></script>
<script src="test.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<p>Ember.js学んでるお!</p>
<p>私の名前は{{name}}です。</p>
<p>{{input value = name}}</p>
</script>
</body>
</html>
test.js
App = Ember.Application.create();