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();

表示される画面のTemplateを定義 - Ember.js(1)

準備

Templateとは?

コード