innerHTML は文法にうるさい。

javascript JST template

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 って、そういえば昔あったなー。
それで何とかなるのかな。とも思ったけど、もう心が折れました。