JSTの最近のブログ記事
JavaScript Template(JST) を使って、HTML中に直接テンプレートを記述する方法
は問題がありました。
記述したテンプレートを innerHTML として取得すると、
ブラウザがそれぞれ勝手な解釈をして「正しい」html に書き直そうとします。
結果、少なくとも以下の問題が発生します。
- 不等号が htmlentities に変換される
{if hoge>2}${hoge}{/if}
みたいな非常によくある if 文が、
{if hoge < 2}${hoge}{/if}
↑こうなって parse error。
ただ、これくらいならソース弄って 置換してやれば問題ないです。
- table のloop とか、実質無理。
<table>
{for val in data}
<tr><td>{val.title}</td><td>{val.value}</td></tr>
{/for}
</table>
↑こんなことしてテーブル出力したいじゃないですか。
でも、IE 様の innerHTML は </tr>と<tr>間の記述を無視してくれます。
そんな IE 様でも動かすにはこんな感じ
<table>
<!--{for val in data}-->
{for val in data}
<tr><td>{val.title}</td><td>{val.value}</td></tr>
{/for}
<!--{/for}-->
</table>
IE様 では innerHTML でも comment は 無視されない。
firefox では、innerHTML では comment は無視される。
こういうの、hack っていうの？
やってられるかっつうの。
ie、バーカ。バーカバーカ。
で、結局推奨通り 見えない textarea に入れて、value を取得することになるわけですが、
それじゃ意味ねえのよ。
デザイナさんと共同作業したいから、本来あるべきところにあってほしいわけで。
textarea に入れるくらいなら、その意味では、使わない方がマシ。
javascript でチマチマ html 組み立てる手間は省けるけどさー。
サーバサイド javascript って、そういえば昔あったなー。
それで何とかなるのかな。とも思ったけど、もう心が折れました。
2007/02/10追記
この方法には問題がありました。
http://d.hatena.ne.jp/am11op/20070209/1171039704
JavaScript Template なる javascript のテンプレートエンジンを使ってみた。
あまりにもそのまんまなネーミングである。
ダウンロード、使い方は下記リンクに。
http://trimpath.com/project/wiki/JavaScriptTemplates
英語だけど、簡単だから僕でもわかったよ！
でも日本語にしてくれてる親切な方もいます！
http://d.hatena.ne.jp/shogo4405/20060928/1159422730
http://d.hatena.ne.jp/m-hiyama/20051201/1133396794
使い方は簡単で、
ライブラリをインクルードして、こんな感じにするだけ。
var template = "Hello ${name}!";
var data = {name: 'somebody'}var myTemplateObj = TrimPath.parseTemplate(template);
var result = myTemplateObj.process(data);alert(result); //出力結果は「Hello somebody!」
で、javascript からHTML弄る時に、
- チマチマ弄るならDOM操作
- ダイナミックに弄るなら innerHTML で(ただし、HTML の組み立てはローカル変数内で行うこと)
と相場は決まってますが、
決まってるらしいですが、
決まってるとどこかで聞いた覚えがありますが、
ダイナミックに弄る場合は HTML テンプレートによる出力で
innerHTML を入れ替えるのがすっきりしてよさそうです。
コードと HTML も分離しやすいしね。
で、これを使ってこんなサンプル作ってみました。
こんなソースです。
<html>
<head>
<script type='text/javascript' src='../js/template.js'></script>
<script type='text/javascript'></script>
</head>
<body><div id='contents'>
${say} World!
</div>
</body>
</html>
ソース中に直接テンプレートを記述しちゃって、
それを getElementByID により取得、
さらに JST かませた結果を差し替えてます。
これによるメリットは
- HTML を分離できる
- javascript から出力されるものがそのままそこにあるので、わかりやすい (てことは、意欲的なデザイナさんとの共同作業が可能！)
- javascript で改行コード挟んだらエラー出るのとか気にしなくてよい
片や、デメリットは
- javascript をオフにされると、トホホなことに
- SEO って知ってる？とか意地悪言われるかも
結構強力なデメリットがありますが、
まあ SEO 気にしなくてよいようなページではやってみる価値あるかも。
about pm11op
関西でプログラマやってます。
- pm11op at gmail.com
