Ember+Bootstrap3でナイスなモーダルダイアログを

なんだろう、この「居るよね、こういう奴」感ｗ

…出そうとしてハマった記録です。

■公式ページ■

USING MODAL DIALOGSというページがあるのですが…この通りやっても動きません。何で動かなかったのかはこれから調べるんですが…とにかく、下の方にあるサンプルコード表示窓から正しくコピペしても動きません。ああもう、何時間ツブしたんだよorz

■ここがバッチリ■

で、どうにかならないかと探して出てきたのがここ。
　　MASTER YOUR MODALS IN EMBER.JS
ember modal dialogで探すと2番目に出てくるんですけどね。ともかく、テキスト読みながら、必要なhandlebarsを補っていけば、ちゃんと動きます。bootstrapのfade dialogも効いて、ズルっとダイアログが出てきた瞬間「やったー！」と大声を上げてフロアの人の注目を浴びてしまいました。

なお、コピペで動かない場合には、一番下にサンプルコードのページがありますので、そちらを使ってください。自分でコピペしたものと比べると間違いがよくわかります…私のように。

ステップバイステップでコードの意味が解説されているので改造も簡単だし…今後はここで勉強しようっと＞ember guru

■{{outlet}}について■

Emberを扱い慣れている方には当たり前のことなのだと思いますが、ググってもすぐには出てこなかったことなので説明しておきます。

ご存知の通りEmberはone page htmlをWebアプリを作ることができます。その際、一度に表示されるのは

<script type="text/x-handlebars">

で示されるテンプレートで区切られた範囲です。ただ、通常のWebアプリではツールバー、フッター、サイドバーなど共通の要素が多いです。そういうのをいちいち、各テンプレート内に置くのはあまりにもダサいです。こういう場合には、

<script type="text/x-handlebars">
  {{toolbar}}
  {{outlet}}
  {{footer}}
</script>

のようにして外側を定義します。ここでは data-template-name が指定されていませんが、なしだとアプリケーション全体で共通して【外側】として扱われ、遷移したページは勝手に {[outlet}} のところに挿入されます。

…知りませんでした。

知らなかったので【内側】の部分を全部コンポーネントで作って {{yield}} で挿入していました。ははははははははははははｈ　orz

また、

{{outlet}}
{{outlet "modal"}}

と並べて書いておけば、常時outletに【内側】のページが表示され、指示をすればその上にモーダルダイアログが表示されます。overlayに関するスタイルなどは勝手にemberが面倒を見てくれます（サンプルではbootstrapが装飾してくれています）。以下のコードは、ダイアログを開くためのボタンで、

<button {{action 'showModal' 'settings-modal' model}}>settings</button>

そこから呼び出されるのが以下の関数です。

showModal: function(name, model) {
  this.render(name, {
    into: 'application',
    outlet: 'modal',
    model: model
  });
}

結果として {{outlet "modal"}} に、'settings-modal'というコンポーネントが表示されます。くどいですが、outletは予約語、'modal'は名称です。

■data-template-nameなしと"index"指定■

ついでに　<script type="text/x-handlebars" data-template-name="index"> に関しては「何も指定しなければ初期状態で表示される」ぐらいしか書いていないのですが、これと data-template-name なしのhandlebarsとの違いは、なしは外側ページ、data-template-name="index"アリは外側ページのoutletに初期表示されるテンプレート、っていうことになるようです。

蛇足ですが、なしだとApplicationController、アリだとIndexControllerがcontrollerになります。暗黙の了解が多くて悩むことも多いのですが、わかってしまえばスッキリですね。

なおjsbin.comを使うと、アトリビュートを削ったり {{outlet}} を足したりした結果が即座に反映されるので、とても勉強になります。ぜひご自身の目でお確かめください。

さーて、明日はAuthenticationを調べて、その後は無限スクロールをpromiseとbootstrapを使って実装してみます。このペースなら、予定通り今週中に開発中のアプリに必要な技術要素をだいたい網羅できそうだなぁ。

いやはや…＠53歳。