この記事はEmber.js Advent Calendar 2013の参加作品です。では改めてこれの説明文を確認しましょう。

Ember.js だったり Ember.js じゃなかったり、なんかそんな感じで。

なるほど(強調は引用者)。はい、では本題です。


やること

先日Ember.jsのハンズオンに参加させていただき、今はその知見をはよ社内に広めんかいという苛烈なプレッシャーと戦っているわけですが、あまり興味のない人に「おっ」と言わせるには実際に動きを見せないとと思うのです。

それもできればシンプルなコードでー、と考えるとEmberホームページにある「名前を入力するとモデルが変わって画面の表示も変わる」AUTO-UPDATINGのサンプルがちょうどいい感じですかね。


13

あのコードは何度か写経してるので、今回は何も見ずにあれをかけるのかチャレンジしてみたいと思います。


準備書き書き

まずはライブラリとスタイルを取り込むところです。この辺はgoogleさんでホスティングしてくれてるから楽ちんですよね。CSSは本当はいろいろやってるんだろうけど、最低限。text-transform:uppercase;ってので大文字になるんですね。ほほう。


JS書き書き

次はJSでモデルの定義をしてやります。なんとなく、ドキュメントには「JavaScript書かなくてもいけるぜ!」って書いてあったような気もするのですが。。気のせいかな。


HTML書き書き

inputとoutputを先ほどモデルで定義した「model」でつないでやるイメージでしょうかね。ドキュメントをみるとrefパラメータはDeprecatedなんですかね。。まあ社内勉強会でイメージを伝える分には問題ないでしょう。



できた!

これが
00

こうなる!

18

うん、動いてますね。とはいえ、名前の所に入力したHTMLがエスケープされなかったり、モデル変更のタイミングがinputからフォーカスが外れたときとか、ちょっと動きが違う部分があるようです。うーん、ちゃんと書けるようになってたつもりでいたから残念。もう一度答え合わせがてら公式のホームページを見直してみたいと思います!