Meteorのハマるかもしれない話の続きです。
Meteor.jsは、 Webアプリづくりを楽しくする フレームワークです。
このシリーズ（勝手にシリーズ化してるw）では、私が去年Meteorとjavascriptを同時に初めて触った超初心者の時から今（時間は経ったけどまだスキルはアップグレードできてない）までにハマったことを晒していきたいと思います。
前回記事ではMeteorをこれから触ってみよう、という方に是非見ていただきたい参考サイトを紹介させていただきました。
前回記事：JavaScript超初心者向け Meteor メモ (1)
今回は最近のネタから、先日行われたMeteor v0.8.0で行われたテンプレートエンジンの更新について見ていきたいと思います。
ちょっと今回のUpdateキツいなぁ、というのが正直な感想。。
Meteorが採用するテンプレート記法はHandlebarsをカスタマイズしたSpacebarsというものです。
今回、この記法をDOMにレンダリングする部分のエンジンがBlazeというものに更新されたことで、従来のコードがいくつか変更しないと動かない状況が見つかっています。
v0.8.0の変更点はBlaze Wikiにまとめられていますが、この中から、いくつか影響のありそうな内容を紹介します。
書き方が変わったもの（バグ含む）
v0.8.0では </li>が必要。(バグ。将来治ると思います)
まず最初はBlazeに変更したことにより発生したと思われるバグから紹介します。
Shouldn't require <li> to be closed with </li> #1842で報告されていますが、v0.8.0では下記コードはエラーになってしまいます。
<ul>
<li>abcde
<li>fghij
</ul>
下記のように、閉じタグを書くと動くようになります。
<ul>
<li>abcde</li>
<li>fghij</li>
</ul>
これは、 <template>タグの中だけでなく、<body>配下も同じ なので注意してください。
個人的には、<li>で閉じタグが省略できる仕様、という方が気味悪くて謎なのですが、この件はどこかのUpdateで修正されそうですですので期待しましょう。
(2014/12/19追記) v1.0.1でも修正されていないようです。
{{loginButtons}} は {{> loginButtons}} に
accounts-uiをHTMLに埋め込むとき、これまでは{{loginButtons}}と書いていましたが、v0.8.0から{{> loginButtons}}という書き方に変更されました。
これはあからさまに書き方が変わっただけですので、修正は簡単ですね。
{{aaa.0.bbb}} みたいなのは、{{aaa.[0].bbb}} に
タイトル通り。
Blaze Wiki: Dotted helpers with numeric indices
checkboxの checked とかでエラーになる （バグっぽい）
Blaze Wiki: Conditional attributes with no value (eg checked, selected)
エラーになる書き方
<input type="checkbox" {{#if isChecked}}checked{{/if}} />
これならエラーにならない
<input type="checkbox" checked={{isChecked}} />
<input type="checkbox" checked={{#if isChecked}}checked{{/if}} />
うーん。これ仕様変更なの？将来治ると思いたいんですけどねぇ。。。
HTMLをWell-formedにしろ?
次はテンプレートの書き方に影響のある話です。
Blaze Wikiに書いてあります。
ちょっと文章力足りなすぎて、うまく説明できないのでコードを見てくださいw
先ほどのBlaze Wikiから転載します。
前はこれでも良かった
<template name="hello">
{{#if bold}}<b>{{/if}}
Hello {{name}}!
{{#if bold}}</b>{{/if}}
</template>
v0.8.0以降はこう書いて
<template name="hello">
{{#if bold}}
<b>Hello {{name}}!</b>
{{else}}
Hello {{name}}!
{{/if}}
</template>
つまり、タグの開始と終了が違う{{}}のブロックに分かれてしまっているからダメ、ということのようです。
{{}}ブロックの中でHTMLの開始タグ、終了タグなどの入れ子構造が取れていれば問題なさそうですが、しかし、これ、使いにくくなってないのかなぁ？こうやりたいこともあると思うんだけど。。。
いずれにせよ、昔のサンプルなど動かないときには、この件もチェックしてみてください。
renderedが1回だけしか呼ばれなくなりました
これも影響のありそうな修正です。
これまではテンプレートが更新されると`renderedというコールバックが毎回呼び出されていました。
これが今回のv0.8.0から最初にテンプレートを更新したタイミングで1度しか呼び出されなくなったようです。(Blaze Wiki)
特に、{{#each hoge}} のようにリストを取り扱う際は要注意です。
どのようにコードを書き換えたら良いか、avital / meteor-ui-new-rendered-callbackで紹介されていますので、対処方法の説明は割愛します。要は、 リストで見るんじゃなくて、その中のアイテムでひっかけろ といった対処法のようです。
削除された機能
{{#constant}} {{#isolate}} preserve
すいません。。私はこれらを使ったことないのですがpreserveという機能で使っていたもののようですが削除されたようです。
Blaze Wiki: No more {{#constant}}, {{#isolate}}, or preserve
tapイベント
これは、もともと対応してたけどうまく動いてなかったから削除したようです。
という状況なので、あまり影響はないと思います。
Blaze Wiki: No more 'tap' event
Meteor.render
Blaze Wiki: Meteor.render has been removed
これも削除されました。
テンプレートのレンダリングを手動で行ってインサートする時に使っていたもののようです。
代わりにUI.insert()やUI.render()を用いるようです。
UIの使い方については、Meteor 0.8.0 Reference #UIを見るのが良いと思います。
まだ将来リファクタリングを予定しているらしく、この代わりの手段もあまり使わない方が良さそうです。
Handlebars
Handlebarsネームスペースは削除されました。
Handlebars.registerHelperはUI.registerHelperになりました。
まとめ。まだv0.8.0への更新は早いと思う。v1.0の前に、v0.8.1とか出ると思う。というか出てほしい。
今回紹介した内容は、Blaze Wikiで紹介されている変更点全てではありません。何かおかしな点に出くわしたら、Blaze Wikiや、Meteor ドキュメントを参照してみてください。
正直Meteorのv0.8.0はテンプレートエンジンが更新されたばかりで、安定していない印象があります。
正式リファレンスには記載されていない細かなバグがあるかもしれませんので、以前のバージョンで開発を始めている方は更新は待った方が良さそうです。
しかし、既にMeteor ドキュメントは、v0.8.0に合わせて更新されています。
今から始める方は、0.8.0ベースで行くしかないでしょう。というわけで、もうしばらくv0.8.0を使ってみようと思います。
ハマりそうなポイントが見つかったら、随時更新していこうと思います。
そこ違うぞ〜！とか、追加情報とか、質問とか、何かありましたら、コメントください。
どうか、よろしくお願いします。
バックナンバーと続き
他のMeteorメモもよろしくお願いします！
JavaScript超初心者向け Meteor メモ (1)
JavaScript超初心者向け Meteor メモ (3) シンプルなチャットを作ってみる
JavaScript超初心者向け Meteor メモ (4) ログイン画面を作る （基本編）
JavaScript超初心者向け Meteor メモ (5) ログイン画面を作る （Google/Twitterアカウント編）
JavaScript超初心者向け Meteor メモ (6) 外部パッケージを使ってみる
JavaScript超初心者向け Meteor メモ (7) テンプレートを使ってみる